React知识点总结

1，修改 Props 是不好的Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。

2，State 工作原理：常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callback 回调。大部分情况下不需要提供 callback，因为 React 会负责把界面更新到最新状态。

3， 哪些组件应该有 State：大部分组件的工作应该是从 props 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。尝试把尽可能多的组件无状态化。 这样做能隔离 state，把它放到最合理的地方，也能减少冗余并，同时易于解释程序运作过程。

4，哪些应该作为State：State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。 当创建一个状态化的组件时，想象一下表示它的状态最少需要哪些数据，并只把这些数据存入 this.state。在 render() 里再根据 state 来计算你需要的其它数据。如果在 state 里添加冗余数据或计算所得数据，需要你经常手动保持数据同步，不能让 React 来帮你处理。

5，哪些不应该作为State：this.state 应该仅包括能表示用户界面状态所需的最少数据。因些，它不应该包括：

• 计算所得数据： 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到 render() 里更容易保证用户界面和数据的一致性。例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串， 直接在 render() 里使用 this.state.listItems.length + ' list items' 比把它放到 state 里好的多。

• React 组件： 在 render() 里使用当前 props 和 state 来创建它。

• 基于 props 的重复数据： 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为未来的 props 可能会变化。   

6，在 JSX 里使用 ... 传递属性：有时把所有属性都传下去是不安全或啰嗦的。这时可以使用解构赋值中的剩余属性特性来把未知属性批量提取出来。列出所有要当前使用的属性，后面跟着 ...other。

var { checked, ...other } = this.props;

这样能确保把所有 props 传下去，除了 那些已经被使用了的。

7，组件生命周期：

• 挂载： 组件被插入到DOM中。

• 更新： 组件被重新渲染，查明DOM是否应该刷新。

• 移除： 组件从DOM中移除。

will方法，会在某些行为发生之前调用，did方法，会在某些行为发生之后调用。

挂载

• getInitialState(): object在组件被挂载之前调用。状态化的组件应该实现这个方法，返回初始的state数据。

• componentWillMount()在挂载发生之前立即被调用。

• componentDidMount()在挂载结束之后马上被调用。需要DOM节点的初始化操作应该放在这里。

更新

• componentWillReceiveProps(object nextProps)当一个挂载的组件接收到新的props的时候被调用。该方法应该用于比较this.props和nextProps，然后使用this.setState()来改变state。

• shouldComponentUpdate(object nextProps, object nextState): boolean当组件做出是否要更新DOM的决定的时候被调用。实现该函数，优化this.props和nextProps，以及this.state和nextState的比较，如果不需要React更新DOM，则返回false。

• componentWillUpdate(object nextProps, object nextState)在更新发生之前被调用。你可以在这里调用this.setState()。

• componentDidUpdate(object prevProps object prevState)在更新发生之后调用。

移除

componentWillUnmount()在组件移除和销毁之前被调用。清理工作应该放在这里。

8.条件渲染。在React中，可以选择在不同条件下渲染不同组件。

    这里有两个组件：

现在创建一个Greeting组件，根据用户是否登录，显示其中一个组件：

这个例子根据props中的isLoggedIn渲染出不同的内容