React开发中需要注意的几点内容

1、  所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

2、  正确地使用State（状态）。

 

• state(状态) 更新可能是异步的，用setState() 代替；
• state(状态) 更新可能是异步的；

// 错误
this.setState({
  counter: this.state.counter + this.props.increment,
});
// 正确
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

• state(状态)更新会被合并；

3、  React 拥有一个强大的组合模型，建议使用组合而不是继承以实现代码的重用 。

4、 应该尽量少用refs，下面有一些正好使用 refs 的场景: 

 

• 处理focus、文本选择或者媒体播放
• 触发强制动画
• 集成第三方DOM库

 如果可以通过声明式实现，就尽量避免使用 refs 。例如，相比于在 Dialog 组件中暴露 open() 和 close() 方法，最好传递 isOpen 属性。

 

5、  findDOMNode()

 

 

• findDOMNode是一个用于访问真实 DOM 节点（underlying DOM node）的接口。在大多数情况下，不建议使用它，因为它会越过组件抽象层访问真实 DOM 。
• findDOMNode仅适用于已装载的组件（即已放置在DOM中的组件）。如果你试图在一个尚未安装的组件上调用它（就像在一个尚未创建的组件上调用 render()中的 findDOMNode() ），将抛出一个异常。
• findDOMNode不能用于函数式组件。