1. 组件状态（State）管理：
- 避免直接修改状态：React 的状态不应该直接修改。例如，不能这样做：
count = count + 1
应该使用 setState（类组件）或 useState（函数组件）来更新状态:
setCount(count + 1)
- 使用状态更新函数：当更新状态时，最好使用函数形式的更新（prev => prev + 1），以避免多次更新时状态不一致的问题。
2. 组件重渲染优化：
- 避免不必要的重新渲染：React 会在状态或属性（props）变化时重新渲染组件。如果组件渲染过于频繁，可能会影响性能。使用 React.memo 或 useMemo 来优化这些渲染。
- React.memo：用于防止组件在 props 没有变化时重新渲染。
const MyComponent = React.memo(function MyComponent(props) {
3. 事件处理：
- 绑定事件处理程序：在类组件中，记得绑定 this：
this.handleClick = this.handleClick.bind(this);
- 在函数组件中，通常不需要手动绑定，直接定义一个箭头函数即可。
4. 性能优化：
- 异步操作：React 的状态更新是异步的。如果依赖前一状态值更新，可以使用回调函数形式的 setState 或 setCount：
setCount((prev) => prev + 1);
- React.lazy 和 Suspense：用于懒加载组件，减少初次加载时的资源消耗。
const MyComponent = React.lazy(() => import('./MyComponent'))
5. Props 和状态传递：
- 数据流向：React 的数据流是单向的。父组件可以通过 props 向子组件传递数据，但子组件不能直接修改父组件的状态。子组件需要通过事件或回调函数来通知父组件更新状态。
6. 表单处理：
- 受控组件：在 React 中，表单输入通常是“受控组件”，即输入字段的值由状态管理：
const [value, setValue] = useState('');
const handleChange = (e) => setValue(e.target.value); return <input type="text" value={value} onChange={handleChange} />;
- 不受控组件：如果你不想每次输入时都更新状态，可以使用不受控组件：
const inputRef = useRef(); return <input ref={inputRef} />;
7. Hooks 使用注意事项：
- 遵循规则：React 的 hooks（如 useState、useEffect）必须遵循以下规则：
- 只能在函数组件中调用。
- 只能在组件的最顶层调用（不要在循环或条件语句中调用）。
8. JSX 语法：
- 嵌套组件：JSX 支持嵌套组件，确保返回的 JSX 元素有一个根元素：
return ( <div> <ChildComponent /> </div> );
- 条件渲染：React 提供了多种方式来进行条件渲染，比如 if 语句、三元运算符等：
return condition ? <ComponentA /> : <ComponentB />;
9. Error Boundaries（错误边界）：
- 处理渲染错误：使用错误边界捕获组件中的错误，并防止整个应用崩溃。可以通过 componentDidCatch 或 static getDerivedStateFromError 来实现。
class ErrorBoundary extends React.Component { componentDidCatch(error, info) {
10. Context API：
- 跨组件共享状态：React 的 Context API 使得跨层级的组件之间可以共享状态，而不需要通过 props 一层一层地传递。
const ThemeContext = React.createContext('light')
