React学习笔记（5）

表单中的受控组件与非受控组件

1、非受控组件

React要编写一个非受控组件，可以使用ref来从DOM节点中获取表单数据，就是非受控组件。

例如，下面的代码使用非受控组件接受一个表单的值:

还有一种说法就是，React组件的数据渲染是否被调用者传递的props完全控制，控制则为受控组件，否则为非受控组件。

我感觉吧，受控组件之所以受控，是因为使用了setState更新，因此每一次更新的时候都会触发render函数，导致传给其他组件的数据随之变化，而不是像非受控组件那样，传的值恒定为初始值

组件间通信

1.父子组件通信方式

(1)传递数据(父传子)与传递方法(子传父)
(2) ref标记(父组件拿到子组件的引用,从而调用子组件的方法)
在父组件中清除子组件的input输入框的value值。this.refs.form.reset()

2.非父子组件通信方式

(1)状态提升(中间人模式)
React中的状态提升概括来说，就是将多个组件需要共享的状态提升到它们最近的父组件
上.在父组件.上改变这个状态然后通过props分发给子组件.
(2)发布订阅模式实现
(3) context状态树传参

React生命周期

1.初始化阶段

componentWillMount: render之前最后一次修改状态的机会
render:只能访问this. props和this.state,不允许修改状态和DOM输出
componentDidMount:成功render并渲染完成真实DOM之后触发，可以修改DOM

2.运行中阶段

componentWillReceiveProps:父组件修改属性触发
shouldComponentUpdate:返回false会阻止render调用
componentWillUpdate: 不能修改属性和状态
render:只能访问this.props和this.state, 不允许修改状态和DOM输出
componentDidUpdate: 可以修改DOM

3.销毁阶段

componentWillUnmount:在删除组件之前进行清理操作，比如计时器和事件监听器

老生命周期的问题

(1) componentWillMount ,在ssr中这个方法将会被多次调用，所以会重复触发多遍， 同时在这里如果绑定事件,将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃。
(2) componentWillReceiveProps外部组件多次频繁更新传入多次不同的props,会导致不必要的异步请求。
(3) componetWillupdate,更新前记录DOM状态,可能会做一些处理，与componentDidUpdate相隔时间如果过长，会导致状态不太新。

新生命周期的替代

(1) getDerivedStateFromProps 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ,返回一个对象作为新的state,返回null则说明不需要在这里更新state。
(2) getSnapshotBeforeUpdate 取代了componetiVillUpdate ,触发时间为update发生的时候,在render之后dom渲染之前返回一个值，作为componentDidUpdate的第三个参数。