ReactJS中常用的优化技巧

// 使用PureComponent替代Component
class MyComponent extends React.PureComponent {
  // ...
}

// 使用React.memo包裹函数组件
const MyFuncComponent = React.memo(() => {
  // ...
});

// 使用key属性优化列表渲染
class MyList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

// 使用shouldComponentUpdate或memo进行组件的钩子函数优化
class MyPureComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 根据新旧props和state判断是否需要更新
    return this.props.someProp !== nextProps.someProp ||
           this.state.someState !== nextState.someState;
  }

  render() {
    // ...
  }
}

// 使用React.lazy和Suspense实现懒加载组件
const MyLazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback="Loading...">
        <MyLazyComponent />
      </Suspense>
    </div>
  );
}

// 使用React.createContext实现跨组件传递数据
const MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value={someValue}>
      // ...
      <MyComponent />
      // ...
      <MyFuncComponent />
      // ...
    </MyContext.Provider>
  );
}