ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 确保“呈现型”的组件功能单一 把 `react 组件` 分为“逻辑型组件”和“呈现型组件” 是很有必要的。前者包含的是业务逻辑,里面不应该包含HTML;后者一般是可复用的,可以包含HTML。前者可以拥有自己的内部的 `state`,而后者不应该拥有。 ## 多用 props 如果能用 `props` 就不要用 `state`,这一定程度上可以减少应用程序的复杂度。 一般的模式是:创建一个“无状态”的组件(呈现型组件),只负责呈现数据,把包含 `state` 的“逻辑型组件”做为这些组件的父级组件。 然后把它内部的 `state` 作为 `props`传递给下面的呈现型组件。这些逻辑型组件包含了所有的交互逻辑。 ## 使用 propTypes `react 组件` 都应该完成 `propTypes` 验证。每一个 `this.props` 的属性都应该有一个与之对应的 `propTypes`。 避免使用这些没有描述意义的 prop-types: * React.PropTypes.any * React.PropTypes.array * React.PropTypes.object 最好使用: * React.PropTypes.arrayOf * React.PropTypes.objectOf * React.PropTypes.instanceOf * React.PropTypes.shape ## 永远不要在DOM中保存 state 不要通过 `data-` 属性或class类。所有的信息应该都存储在javascript中,或者在React组件中,或者在React store 中,如果使用了类似 `Redux` 这样的框架的话。