React 17 新特性解析

React 17

React 17 主要是提升框架的稳定性和兼容性。

新特性解析

1. 事件委托的改进

React 17 调整了事件系统的工作方式：

• 之前：React 16 将事件监听器绑定到 document 上。
• 现在：React 17 将事件绑定到 React 树的根节点（通常是 <div id="root">）。

影响：

• 允许多个 React 版本共存于同一页面（例如，一个页面同时运行 React 16 和 React 17）。
• 更贴近原生 DOM 行为，减少与第三方库的冲突。

代码示例：

// React 17 下，事件绑定到 #root 而非 document
ReactDOM.render(<App />, document.getElementById('root'));

2. 渐进升级支持

React 17 引入了对“渐进升级”的支持：

• 你可以在一个大型应用中逐步将部分组件升级到 React 17，而无需一次性升级整个代码库。

3. 移除事件池（Event Pooling）

React 16 及之前版本使用事件池来复用合成事件对象，以优化性能。但这导致了一些问题，例如无法异步访问事件属性。React 17 移除了事件池：

• 之前：

  function handleClick(event) {
    setTimeout(() => console.log(event.target), 1000); // 可能为 null
  }
  

• 现在：事件对象行为更符合原生预期，异步访问不再有问题。

影响：代码更直观，但微小的性能优化被移除。

4. 错误边界的行为调整

React 17 改进了错误边界在开发模式下的表现：

• 未被错误边界捕获的错误现在会导致整个 React 树卸载（仅限开发模式）。
• 生产模式下行为不变，保持稳定性。

示例：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

5. JSX 转换的简化

React 17 优化了 JSX 的编译方式：

• 之前：需要显式导入 React（如 import React from 'react'）。
• 现在：配合新版 Babel 和 @babel/plugin-transform-react-jsx，无需导入 React。

配置： 更新 babel.config.js：

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "runtime": "automatic" }]
  ]
}

然后：

// 无需 import React
function App() {
  return <h1>Hello, React 17!</h1>;
}

从 16.x 升级到 17

没有重大 API 变更：

1. 更新依赖：

   npm install react@17.0.2 react-dom@17.0.2
   

2. 检查第三方库兼容性：大多数 React 16 库无需改动即可运行。
3. 测试事件处理：确保异步事件逻辑正常。