react-2

1、特点

1. 轻量：React 的开发版所有源码（包含注释）仅 3000 多行
2. 原生：所有的 React 的代码都是用原生 JS 书写而成的，不依赖其他任何库
3. 易扩展：React 对代码的封装程度较低，也没有过多的使用魔法，所以 React 中的很多功能都可以扩展。
4. 不依赖宿主环境：React 只依赖原生 JS 语言，不依赖任何其他东西，包括运行环境。因此，它可以被轻松的移植到浏览器、桌面应用、移动端。
5. 渐近式：React 并非框架，对整个工程没有强制约束力。这对与那些已存在的工程，可以逐步的将其改造为 React，而不需要全盘重写。
6. 单向数据流：所有的数据自顶而下的流动
7. 用 JS 代码声明界面
8. 组件化
9. jsx语法：JS 的扩展语法，需要使用 babel 进行转义

 

2、组件

2.1、组件

1. 函数组件

返回一个 React 元素

1. 类组件

必须继承 React.Component 必须提供 render 函数，用于渲染组件

 

2.2、属性

1. 对于函数组件，属性会作为一个对象的属性，传递给函数的参数
2. 对于类组件，属性会作为一个对象的属性，传递给构造函数的参数

注意：组件的属性，应该使用小驼峰命名法

组件无法改变自身的属性。（只读）

之前学习的 React 元素，本质上，就是一个组件（内置组件） （都只读）

React 中的哲学：数据属于谁，谁才有权力改动（父组件也无权改）

React 中的数据，自顶而下流动

 

2.3、状态

a、组件状态

组件状态：组件可以自行维护的数据

组件状态仅在类组件中有效

状态（state），本质上是类组件的一个属性，是一个对象

 

b、状态变化

不能直接改变状态：因为 React 无法监控到状态发生了变化 必须使用 this.setState({})改变状态 一旦调用了 this.setState，会导致当前组件重新渲染

 

组件中的数据

1. props：该数据是由组件的使用者传递的数据，所有权不属于组件自身，因此组件无法改变该数据
2. state：该数据是由组件自身创建的，所有权属于组件自身，因此组件有权改变该数据。只有组件自身可以改

 

3、事件

在 React 中，组件的事件，本质上就是一个属性 如果没有特殊处理，在事件处理函数中，this 指向 undefined

1. 使用 bind 函数，绑定 this
2. 使用箭头函数

 

4、生命周期

4.1、旧版： React < 16.0.0

1. constructor
2. 同一个组件对象只会创建一次
3. 不能在第一次挂载到页面之前，调用 setState，为了避免问题，构造函数中严禁使用 setState
4. 因为 setState 会导致重新渲染，在挂载之前，没必要重新渲染
5. componentWillMount
6. 正常情况下，和构造函数一样，它只会运行一次
7. 可以使用 setState，但是为了避免 bug，不允许使用，因为在某些特殊情况下，该函数可能被调用多次
8. render
9. 返回一个虚拟 DOM，会被挂载到虚拟 DOM 树中，最终渲染到页面的真实 DOM 中
10. render 可能不只运行一次，只要需要重新渲染，就会重新运行
11. 严禁使用 setState，因为可能会导致无限递归渲染
12. componentDidMount
13. 只会执行一次
14. 可以使用 setState
15. 通常情况下，会将网络请求、启动计时器等一开始需要的操作，书写到该函数中

5.组件进入活跃状态

6、componentWillReceiveProps

1. 即将接收新的属性值
2. 参数为新的属性对象
3. 该函数可能会导致一些 bug，所以不推荐使用
4. 7、shouldComponentUpdate
5. 指示 React 是否要重新渲染该组件，通过返回 true 和 false 来指定
6. 默认情况下，会直接返回 true
7. 属性直接被赋值了，不一定要值变化
8. 8、componentWillUpdate
9. 组件即将被重新渲染
10. 9、componentDidUpdate
11. 往往在该函数中使用 dom 操作，改变元素
12. 10、componentWillUnmount
13. 11、通常在该函数中销毁一些组件依赖的资源，比如计时器

 

 

 

4.2、React >= 16.0.0

react 官方认为，某个数据的来源必须是单一的。要么来自属性，要么来自状态。

1. getDerivedStateFromProps
2. 通过参数可以获取新的属性和状态
3. 该函数是静态的
4. 该函数的返回值会覆盖掉组件状态
5. 该函数几乎是没有什么用
6. getSnapshotBeforeUpdate
7. 运行时间：真实的 DOM 构建完成，但还未实际渲染到页面中。
8. 在该函数中，通常用于实现一些附加的 dom 操作
9. 该函数的返回值，会作为 componentDidUpdate 的第三个参数
10. 配合 componentDidUpdate 使用

 

 

5、表单

受控组件和非受控组件

受控组件：组件的使用者，有能力完全控制该组件的行为和内容。通常情况下，受控组件往往没有自身的状态，其内容完全收到属性的控制。

非受控组件：组件的使用者，没有能力控制该组件的行为和内容，组件的行为和内容完全自行控制。

表单组件，默认情况下是非受控组件，一旦设置了表单组件的 value 属性，则其变为受控组件(单选和多选框需要设置 checked)

 

6、HOC 高阶组件

HOF：Higher-Order Function, 高阶函数，以函数作为参数，并返回一个函数

HOC: Higher-Order Component, 高阶组件，以组件作为参数，并返回一个组件

通常，可以利用 HOC 实现横切关注点。

 

注意

1. 不要在 render 中使用高阶组件。在 render 内部的话重新创建，失去状态，浪费效率。在 render 外部则使用的是同一个类。
2. 不要在高阶组件内部更改传入的组件（防止混乱）

 

7、React 中的事件

这里的事件：React 内置的 DOM 组件中的事件

1. 给 document 注册事件
2. 几乎所有的元素的事件处理，均在 document 的事件中处理
3. 一些不冒泡的事件，是直接在元素上监听
4. 一些 document 上面没有的事件，直接在元素上监听
5. 在 document 的事件处理，React 会根据虚拟 DOM 树的完成事件函数的调用
6. React 的事件参数，并非真实的 DOM 事件参数，是 React 合成的一个对象，该对象类似于真实 DOM 的事件参数
7. stopPropagation，阻止事件在虚拟 DOM 树中冒泡
8. nativeEvent，可以得到真实的 DOM 事件对象
9. 为了提高执行效率，React 使用事件对象池来处理事件对象

注意事项

1. 如果给真实的 DOM 注册事件，阻止了事件冒泡，则会导致 react 的相应事件无法触发
2. 如果给真实的 DOM 注册事件，事件会先于 React 事件运行
3. 通过 React 的事件中阻止事件冒泡，无法阻止真实的 DOM 事件冒泡
4. 可以通过 nativeEvent.stopImmediatePropagation()，阻止 document 上剩余事件的执行
5. 在事件处理程序中，不要异步的使用事件对象，如果一定要使用，需要调用 persist 函数