在react开发过程中，有一些常用的优化项

一：修改CSS用?进行显示隐藏控制

 {!flag && <MyComonent style={{display:'none'}} />}
	  {flag && <MyComonent />}

	  // 模拟v-show
	  {<MyComonent style={{display:flag ? 'block' : 'none'}} />}

二：循环使用key，(不要用index作为key,会带来性能问题)

 <ul>
      {items.map((item, index) => (
        <li key={item.id}>{item}</li>
      ))}
    </ul>

三：使用Flagment或<></>空标签包裹减少多个层级组件的嵌套

import React from 'react';

function MyComponent() {
  return (
    <>
      <div>Component 1</div>
      <div>Component 2</div>
      <div>Component 3</div>
    </>
  );
}

四：jsx中不要定义函数：避免在组件内直接定义函数，因为函数定义会在每次组件渲染时重新创建，可能导致性能问题

import React from 'react';

// 定义函数
function handleButtonClick() {
  console.log('Button clicked!');
}

// 定义组件
function MyComponent() {
  return (
    <button onClick={handleButtonClick}>Click Me</button>
  );
}

五：使用shouldComponentUpdate，进行控制组件是否重新渲染

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 根据 nextProps 和 nextState 的值进行判断
    // 如果希望组件更新，则返回 true
    // 如果不希望组件更新，则返回 false

    // 例如，判断某个属性是否发生变化
    if (this.props.someProp !== nextProps.someProp) {
      return true;
    }

    // 或者根据状态进行判断
    if (this.state.someState !== nextState.someState) {
      return true;
    }

    // 默认情况下，返回 true，表示始终更新组件
    return true;
  }

  render() {
    // 组件的渲染逻辑
    return <div>My Component</div>;
  }
}

六：Hooks缓存数据和函数(useMemo 和 useCallback)

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // 处理点击事件
    doSomething();
  }, [dependency]);

  // 使用 handleClick 作为事件处理函数

  return <button onClick={handleClick}>Click Me</button>;
}



function MyComponent2() {
  const expensiveResult = useMemo(() => {
    // 计算耗时的结果
    return computeExpensiveResult(dependency);
  }, [dependency]);

  // 使用 expensiveResult

  return <div>{expensiveResult}</div>;
}

七：使用异步组件

 <Suspense fallback={<div>loading...</div>}>
			<OtherComp />
		  </Suspense>

八：路由懒加载

 const Home = lazy(/**webpackChunkName:'h=Home'**/()=>import('./Home'))

九：使用next.js,SSR渲染