9、State

9.1、不要直接修改 state

除了 state 初始化外，其它地方修改 state，需要使用 setState( ) 方法，否则如果直接赋值，则不会重新渲染组件。

推荐：

this.setState({comment: 'Hello'});

不推荐：

this.state.comment = 'hello';

9.2、State 的更新可能是异步的

出于性能考虑，React 可能会把多个 setState( ) 调用合并成一个调用；因为 this.props 和 this.state 可能会异步更新，所以这种场景下需要让 setState() 接收一个函数而不是一个对象。

推荐：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

不推荐：

this.setState({
  counter: this.state.counter + this.props.increment,
});

10、组件的代码顺序

组件应该有严格的代码顺序，这样有利于代码维护，我们推荐每个组件中的代码顺序一致性。

class Example extends Component {
    // 静态属性
    static defaultProps = {}
 
    // 构造函数
    constructor(props) {
        super(props);
        this.state={}
    }
 
    // 声明周期钩子函数
    // 按照它们执行的顺序，部分钩子”过时”，不建议再使用。
    // 1. componentWillMount(过时)
    // 2. componentWillReceiveProps(过时)

    // 3. getDerivedStateFromProps
// 4. shouldComponentUpdate
// 5. getSnapshotBeforeUpdate
    // 6. componentDidMount
    // 7. componentDidUpdate
// 8. componentWillUnmount
 
componentDidMount() { ... }
 
    // 事件函数/普通函数
    handleClick = (e) => { ... }
 
    // 最后render 方法
    render() { ... }
}

11、使用高阶组件

使用高阶组件(HOC)解决横切关注点问题，而不是使用 mixins ，mixins 导致的相关问题可以参照文档；

12、避免不必要 render 的写法

shouldComponentUpdate 钩子函数和 React.PureComponent 类都是用来当 state 和 props 变化时，避免不必要的 render 的方法。shouldComponentUpdate 钩子函数需要自己手动实现浅比较的逻辑，React.PureComponent 类则默认对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。我们推荐使用React.PureComponent 避免不要的 render。

13、状态提升

如果多个组件需要反映相同的变化数据，建议将共享状态提升到最近的共同父组件中去；从而依靠自上而下的数据流，而不是尝试在不同组件间同步 state。

14、推荐使用 Context

如果某个属性在组件树的不同层级的组件之间需要用到，我们应该使用 Context 提供在组件之间共享此属性的方式，而不是显式地通过组件树的逐层传递 props。

15、Refs 写法

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素：

推荐使用 createRef API 的方式或者回调函数的方式使用 Refs ，

而不是使用 this.refs.textInput 这种过时的方式访问 refs ，它存在一些问题。

16、路由加载

建议使用路由懒加载当前用户所需要的内容，这样能够显著地提高你的应用性能。尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。

推荐：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

不推荐：

import OtherComponent from './OtherComponent';

17、AJAX 发起请求的时机

推荐在 componentDidMount这个生命周期函数中发起 AJAX 请求。这样做你可以拿到 AJAX 请求返回的数据并通过 setState 来更新组件。

18、文件夹文件名命名规范

类型	规范	示例
图片文件夹	小写开头驼峰	assets/image/bottomTabBar
图片文件	小写中划线	work-order.png
样式class命名	小写中划线	.worker-page-container
公共组件components	大写开头驼峰	AreaPicker/index.tsx AreaPicker/index.less
页面文件	小写开头驼峰	pages/applicationContractor/index.tsx pages/applicationContractor/index.less pages/applicationContractor/components/TopPart/index.tsx
公共方法	小写开头驼峰	common/utils.ts