摘要:
依然是先看图: 变更缘由 原来( React v16.0 前)的生命周期在 React v16.0 推出的 Fiber 之后就不合适了,因为如果要开启 async rendering , 在 render 函数之前的所有函数,都有可能被执行多次。 有上一篇我们知道下面的这些生命周期都是原来( Rea 阅读全文
摘要:
本篇文章我们来学习 React 的生命周期 大部分团队不见得会跟进升到 16.0 以后版本,所以我们先来学习 16.0 以前的生命周期 React v16.0 前的生命周期 这里我画了一张流程图,我们根据本图来分析: 1、组件初始化( initialization )阶段 也就是以下代码中类的构造方 阅读全文
摘要:
本篇文章我们来学习组件之间的通信,继续以上篇文章中提到的 添加并展示商品列表 为案例,将其功能复杂化为一个小购物车案例,即拆分一个购物车列表的子组件,跟购物车父组件进行通信。 父组件传值给子组件,通过 props 传值 1.在 src components 文件夹中,新建子组件 Cart.js ,我 阅读全文
摘要:
React 中使用 onClick 类似的写法来监听事件,注意 this 绑定问题 React 里严格遵循单项数据流,没有数据双向绑定,所以要处理两件事,第一是元素本身值的赋值,第二是值改变以后的事件,例如输入框需要设置 value 和 onChange 。 1.在 src components 文 阅读全文
摘要:
条件渲染 React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。 具体实现可以看下面的例子 1.在 src components 文件夹中,再新建 list.js ,具 阅读全文
摘要:
如果数据需要修改,并且同时页面响应变化,我们需要放在 state 中,并且使用 setState 来修改数据,此处我们以一个钟表为例。 1.在 components 文件夹中,新建 Clock.js ,具体代码如下: 2.然后在 src index.js 导入组件,再使用组件,执行代码在浏览器查看结 阅读全文
摘要:
本篇文章我们来学习组件的创建,两种组件的形式,以及如何在组件直接进行通信。 两种创建形式 1.组件有两种创建形式,一种是函数的形式,一种是类的形式,具体如何操作? 在 src 下新建 components 文件夹,再新建 CompType.js ,具体代码如下: 2.然后在 src index.js 阅读全文
摘要:
从本栏起,我们开始系统的学习 React ,本篇文章主要讲述 正式学习知识点之前需要做一些准备工作。 既然是学习,那么还是要看官方的文件,这边提供了预习资源: 预习资源 1. "React" 2. "create react app" 同时我的开发环境是: 开发环境 1. "vscode下载" 2. 阅读全文