React 开发规范(下)
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 |
19、单文件行数限制
单个文件最大不能超过500行，超过后需要拆分组件
20、文件头部注释信息
建议使用vscode插件 koroFileHeader，创建、修改文件时自动生成头部注释信息
主要包含以下字段信息：
@Author: your name
@Date: 2021-09-28 09:26:47
@LastEditTime: 2021-09-28 09:26:48
@LastEditors: Please set LastEditors
@Description: In User Settings Edit
21、函数注释信息
主要包含以下字段信息：
函数的说明信息、参数说明信息、返回值说明信息
22、常量统一提取到constants.ts文件
23、提取typescript类型定义信息到types.ts文件中
根据组件复杂度决定是否单独提取出来（代码行数、type行数）
24、函数组件和 class 类组件的使用场景
建议优先使用函数组件+hooks
作者：_Battle
链接：https://juejin.cn/post/7023922661516378148