React优化策略-01# 初始化项目 1.创建项目 ``` mkidr cli-build cd cli-build

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

循环使用 key

key 可以优化内部的 diff 算法。注意，遍历数组时 key 不要使用 index，可以使用其他的独一无二的数据来表示key 。

比如我们来渲染一个 todo list, 假设数组是这样的

const todos = [
    {
        id: 1,
        name: 'xxx'
    },
    {
        id: 2,
        name: 'xxx2'
    }
]

在遍历这个数组的时候，我们不要使用index来表示key,而是使用每一项的id来表示key

const todoItems = todos.map((todo) =>
  {/* key 不要用 index */}
  <li key={todo.id}>
    {todo.text}
  </li>
)

使用 Fragment 减少层级

当组件层级过多的时候，如果每个组件都以 <div> 作为 root ，则 DOM 层级太多而难以调试。

React中的Fragment 可以用 <>，也可以用React.Fragment表示，但是两个也有区别。

render() {
  return <>
      <p>hello</p>
      <p>world</p>
  </>
}

JSX 中不要定义函数

JSX 是一个语法糖，它和 Vue template 一样，最终将变为 JS render 函数，用以生成 vnode 。

所以，如果在 JSX 中定义函数，那么每次组件更新时都会初始化该函数，这是一个不必要的开销。

比如我们在 JSX中定义函数，这样的时候每次组件更新都会初始化这个函数

<button onClick={() => {...}}>点击</button>

更好的解决方案是提前定义函数，在 JSX 中只引用执行。

class MyComponent extends React.Component {
    clickHandler = () => { /*  */ }
    render() {
        return <>
            <button onClick={this.clickHandler}>点击</button>
        </>
    }
}

上面方案在类组件中适用，如果在函数组件中就没有效果了。如果是函数组件，可以使用useCallbak来缓存函数

函数组件，每次组件更新都会重新执行 App 函数，所以内部的 clickHandler 函数也会被重新创建，这跟在 JSX 中定义是一样的

function App() {
  // 函数组件，每次组件更新都会重新执行 App 函数，所以内部的 clickHandler 函数也会被重新创建，这跟在 JSX 中定义是一样的
  // 不过 React 提供了 useCallback 来缓存函数

  function clickHandler() {
    // ...
  }

  return (
    <>
      <button onClick={clickHandler}>点击</button>
    </>
  )
}

在构造函数 bind this

如果在 JSX 中 bind this ，那每次组件更新时都要 bind 一次。在构造函数中 bind 更好。或者，直接使用箭头函数。