Open AnathanPham opened 1 year ago
React有一个非常重要的理念，就是期望组件都是纯函数。 纯函数有两个特点，一是不会改变外部的状态（比如函数执行中修改了外部obj.a的值或者直接修改了obj的引用等），二是同样的输入得到同样的输出（可以理解为对应的f(x)数学函数)。
为什么React期望组件是纯函数呢？ 因为React是一个状态驱动视图的库，状态（输入）和视图（输出）必须是可以预测的。这就要求同样的输入得到同样的输出。 因为React的组件是可以放置任意数量在任意嵌套层级的。当你改变了外部的状态，这些状态被自身或其他组件使用，就会导致渲染的视图结果不符合预期。这就要求渲染时不会改变外部的状态。 否则，你无法预测你的视图会变成什么样子。
React依赖组件是纯函数的目的不仅仅于此... 跨平台。因为是纯函数，整个函数只涉及到JS的执行（JSX中的标签语法实际上是一个函数的调用），这样一来，React具有了跨平台的能力，你可以在浏览器、Node.js等运行环境中使用React。 易于测试。React可以将render阶段单独抽离出来进行单元测试，我们传入确定的值，检测是否获得预期的结果。
关于副作用 在这里简单的提一下副作用。对于可能使函数不纯的行为，我们称为副作用。React提供了useEffect这个内置hook来处理副作用。他会在React完成渲染之后（实际上是在视图更新后）处理副作用。这样，即使组件包含了副作用，但是这个副作用对于渲染而言是完全独立的，我们依然可以将组件视为纯函数来使用。
React有一个非常重要的理念，就是期望组件都是纯函数。 纯函数有两个特点，一是不会改变外部的状态（比如函数执行中修改了外部obj.a的值或者直接修改了obj的引用等），二是同样的输入得到同样的输出（可以理解为对应的f(x)数学函数)。
为什么React期望组件是纯函数呢？ 因为React是一个状态驱动视图的库，状态（输入）和视图（输出）必须是可以预测的。这就要求同样的输入得到同样的输出。 因为React的组件是可以放置任意数量在任意嵌套层级的。当你改变了外部的状态，这些状态被自身或其他组件使用，就会导致渲染的视图结果不符合预期。这就要求渲染时不会改变外部的状态。 否则，你无法预测你的视图会变成什么样子。
React依赖组件是纯函数的目的不仅仅于此... 跨平台。因为是纯函数，整个函数只涉及到JS的执行（JSX中的标签语法实际上是一个函数的调用），这样一来，React具有了跨平台的能力，你可以在浏览器、Node.js等运行环境中使用React。 易于测试。React可以将render阶段单独抽离出来进行单元测试，我们传入确定的值，检测是否获得预期的结果。
关于副作用 在这里简单的提一下副作用。对于可能使函数不纯的行为，我们称为副作用。React提供了useEffect这个内置hook来处理副作用。他会在React完成渲染之后（实际上是在视图更新后）处理副作用。这样，即使组件包含了副作用，但是这个副作用对于渲染而言是完全独立的，我们依然可以将组件视为纯函数来使用。
参考