React 应用调试与优化学习笔记

1. React 版本与兼容性

• React 18 于 2022 年 3 月发布，但部分库（如 Apollo 客户端）可能与 React 18 不兼容。
• 如果遇到兼容性问题，可以通过修改 package.json 降级到 React 17，并调整 index.js 的代码：
  • React 17：

    import ReactDOM from 'react-dom';
    import App from './App';
    ReactDOM.render(<App />, document.getElementById('root'));
    

  • React 18：

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from './App';
    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    

2. 复杂状态管理

• 独立状态片段：使用多个 useState 创建独立的状态片段，适合简单场景。

  const [left, setLeft] = useState(0);
  const [right, setRight] = useState(0);
  

• 单一状态对象：将状态存储在一个对象中，适合复杂场景，但需小心更新整个对象。

  const [clicks, setClicks] = useState({ left: 0, right: 0 });
  const handleLeftClick = () => {
    setClicks({ ...clicks, left: clicks.left + 1 });
  };
  

• 更新状态的规则：不能直接修改状态，必须通过设置一个新的对象来更新。

3. 数组状态管理

• 使用数组存储点击历史，通过 concat 方法更新数组，避免直接修改数组。

  const [allClicks, setAll] = useState([]);
  const handleLeftClick = () => {
    setAll(allClicks.concat('L'));
  };
  

4. 条件渲染

• 根据状态的值渲染不同的组件或内容。

  const History = (props) => {
    if (props.allClicks.length === 0) {
      return <div>the app is used by pressing the buttons</div>;
    }
    return <div>button press history: {props.allClicks.join(' ')}</div>;
  };
  

5. 组件化与事件处理

• 提取按钮为独立组件，通过 props 传递事件处理函数。

  const Button = ({ handleClick, text }) => (
    <button onClick={handleClick}>{text}</button>
  );
  

• 避免在组件内部定义组件，否则会导致性能问题。

6. 调试 React 应用

• 浏览器开发者工具：始终保持开发者控制台打开，查看错误信息。
• 打印调试：使用 console.log 打印变量，注意使用逗号分隔参数。

  console.log('props value is', props);
  

• 调试器：使用 debugger 命令或在 Sources 标签中设置断点，暂停代码执行。
• React 开发者工具：安装 Chrome 扩展，查看组件的状态和 props。

7. 事件处理的正确方式

• 事件处理程序必须是一个函数，不能直接赋值为字符串或其他类型。
• 避免直接在事件属性中调用函数，应使用箭头函数或定义单独的事件处理函数。

  <button onClick={() => setValue(0)}>reset</button>;
  

8. 函数返回函数

• 可以通过返回函数的方式定义事件处理程序，适用于需要动态参数的场景。

  const setToValue = (newValue) => () => {
    setValue(newValue);
  };
  

9. 组件定义的最佳实践

• 不要在组件内部定义组件，应将组件定义在外部，避免 React 将其视为新组件。

10. 学习资源

• 官方 React 文档：虽然部分内容过时，但仍然是权威的学习资源。
• Egghead.io 课程：推荐《The Beginner's Guide to React》，适合学习新风格的 React。

总结

• React 18 可能存在兼容性问题，可通过降级解决。
• 状态管理需根据场景选择独立状态或单一状态对象。
• 数组状态更新应使用不可变方法（如 concat）。
• 条件渲染通过状态值控制组件的显示。
• 调试时充分利用开发者工具和打印调试。
• 事件处理需遵循 React 规范，避免直接调用函数。
• 组件定义应避免嵌套，提升性能和可维护性。
• 学习 React 时，优先参考官方文档和高质量的在线课程。