Skip to main content

代码规范

总结​

官方规范​

组件命名​

  • 首字母必须大写

    const root = ReactDOM.createRoot(document.getElementById('root'));

    /* 函数组件命名 */
    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
    const element = <Welcome name="Sara" />;


    root.render(element);

禁止使用嵌套组件​

禁止组件中再使用函数来定义组件

export default function Gallery() {  

    // 🔴 永远不要在组件中定义组件  
    
    function Profile() {  
    
    // ...  
    
    }  
    // ...  
}
export default function Gallery() {  

// ...  

}  

// ✅ 在顶层声明组件  
function Profile() {  

// ...  
}

setState()频繁调用​

React从16.3版本开始引入了新的生命周期方法和setState的异步更新，这可以被认为是对setState的一种优化。在此之前，每次调用setState都会导致组件重新渲染，这可能会导致不必要的性能开销。

在React 16.3及以后的版本中，当在事件处理函数或其他的异步回调中调用setState时，React会批量更新以提高性能。这意味着如果你多次调用setState，React会将这些更新合并到一起，然后只触发一次重新渲染。这种优化可以减少不必要的渲染，从而提高应用程序的性能。

如果你不能确定使用的React是最新版，或者旧项目需要优化的情况下，请确保setState()频繁调用的问题，常见的解决方案是对不同字段先进行分别处理，最后再一次性使用setState({xxx:xxx, xxx:xxx, ...})的方式进行批量更新

总的来说，React从16.3版本开始对setState进行了优化，通过引入新的生命周期方法、异步更新和Hooks等特性，提高了React应用程序的性能和可维护性。

所有标签必须闭合​

// 不合法
<br>

// 合法
<br />

// 合法
<br></br>
    
// 合法 - 使用空标签包裹
<><br></>