React 17 是 React 的最新版本，它带来了一些重大的变化。其中最重要的是协议改变。在 React 17 中，React 不再自动绑定事件处理程序。这意味着你需要做一些修改来确保你的代码在 React 17 中正常运行。在本文中，我们将详细介绍这些变化，并提供一些示例代码和指导意义。
协议改变
在 React 16 及之前的版本中，当你在组件中定义事件处理程序时，React 会自动将它们绑定到组件实例上。这意味着你可以在事件处理程序中使用 this 关键字来引用组件实例。例如，你可以这样定义一个按钮的点击事件处理程序：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------- -
--------------------------------
-
-------- -
------ ------- -------------------------------- ------------
-
-在这个例子中，handleClick 方法使用 this.props.message 来访问组件的属性。这是因为 handleClick 方法被绑定到组件实例上，而组件实例拥有 props 属性。
然而，在 React 17 中，React 不再自动绑定事件处理程序。这意味着你需要手动绑定事件处理程序，或使用箭头函数来确保 this 关键字的正确性。例如，你可以这样修改上面的代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----------- - -- -- -
--------------------------------
-
-------- -
------ ------- -------------------------------- ------------
-
-在这个例子中，我们使用了一个箭头函数来定义 handleClick 方法。箭头函数不会创建一个新的 this 关键字，而是继承了外层作用域的 this。这意味着 handleClick 方法中的 this 关键字会引用组件实例。
如果你不想使用箭头函数，你也可以手动绑定事件处理程序。例如，你可以这样修改上面的代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------------- - ----------------------------
-
------------- -
--------------------------------
-
-------- -
------ ------- -------------------------------- ------------
-
-在这个例子中，我们在组件的构造函数中手动绑定了 handleClick 方法。这样可以确保 this 关键字在方法中引用组件实例。
学习意义
协议改变是 React 17 中最重要的变化之一。它是为了解决一个长期存在的问题：当事件处理程序被传递给子组件时，React 会重新创建一个新的函数。这会导致子组件在每次渲染时都会重新渲染，即使它们的 props 没有改变。
通过不再自动绑定事件处理程序，React 可以避免这个问题。现在，事件处理程序是普通的函数，它们不会被重新创建，因此子组件不会在每次渲染时重新渲染。
这个变化对于大型应用程序来说非常重要。它可以帮助你避免性能问题，并提高应用程序的响应速度。
指导意义
如果你正在迁移到 React 17，你需要注意这个协议改变。你需要确保你的事件处理程序被正确地绑定到组件实例上，或使用箭头函数来确保 this 关键字的正确性。
在大型应用程序中，你可能有很多事件处理程序，因此手动绑定它们可能会很麻烦。你可以考虑使用一个高阶组件或一个自定义 Hook 来自动绑定事件处理程序。例如，你可以创建一个名为 useBindHandlers 的 Hook：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-------- ------------------------- --------- -
------ ------------
-- -- -
--------------------------------- -- -
----- ------- - --------------
------------- - -----------------------
---
--
---------- ---------
--
-你可以使用这个 Hook 来自动绑定事件处理程序：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
----------------- - ----------------
-
------------ -----------------
--
----
--
-
------------------- -
--------------------
-
------------- -
--------------------------------
-
-------- -
------ ------- -------------------------------- ------------
-
-在这个例子中，我们使用了 useBindHandlers Hook 来自动绑定 handleClick 方法。这个 Hook 接受一个对象和一个实例作为参数。它会遍历对象中的键值对，并将每个方法绑定到实例上。然后，我们在组件的 componentDidMount 方法中调用 bindHandlers 方法来绑定事件处理程序。
这个例子演示了如何使用 Hook 来自动绑定事件处理程序。你可以根据自己的需求修改这个 Hook，以适应你的应用程序。
结论
React 17 带来了一些重大的变化，其中最重要的是协议改变。在 React 17 中，React 不再自动绑定事件处理程序。这意味着你需要手动绑定事件处理程序，或使用箭头函数来确保 this 关键字的正确性。这个变化对于大型应用程序来说非常重要，因为它可以帮助你避免性能问题，并提高应用程序的响应速度。如果你正在迁移到 React 17，你需要注意这个协议改变，并确保你的事件处理程序被正确地绑定到组件实例上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67442142f3dd653032a41c6c