Question

我已经阅读了很多关于REACT JS的文档，我在几个网站上发现.props应该是不可改变的...如果是这样的话，为什么在React组件生命周期中是一些在触发时触发的函数道具改变了？

http://busypeoples.github.io/post/react-component-lifecycle/

任何人都可以帮我理解为什么吗？

Answer 1

道具从您的父母传入。考虑它们的一种方法就像堆栈中的局部变量，使用编程语言。您可以在代码中更改它们，但该更改只能在当前组件中显示，而不是其他地方。下次您的父组件呈现时，这些更改将被清除。

Re：React生命周期，您可能正在考虑componentWillReceiveProps，这是在您的父级渲染时调用的。当新道具传递到现有组件时会触发。它们将与现有道具具有相同的名称，并且它们可能具有或不具有新值。您可以根据新道具何时进入当地状态采取行动。您可以根据自己的需要使用或忽略它。

Answer 2

它允许改变道具并且在很多情况下都有意义。不变性并不意味着你不允许改变道具。

在此上下文中的不变性意味着当你有深层对象将作为道具传递时，你应该使用https://facebook.github.io/immutable-js/docs/#/。因为你可以改变道具，但是lib指的是确保你每次改变某些东西时都会得到一个完整的新物体（因为原件是不可变的;））。

当支柱改变时，你应该使用一个完整的新物体，因此反应实际上意识到道具已被改变，因为它内部没有深度比较，只是比较了对象的参考。因此，当您对传递的对象/道具进行深度更改时，不可变对象作为道具是确保您的更改将通过您的组件树传播的唯一方法。

Answer 3

对于反应，不可抗性意味着或多或少：

一旦你传递了一个物体作为道具或状态作出反应，你就可以了永远不应该改变同一个对象。复制成新的对象，并更改副本。

React没有任何生命周期方法，这些方法是由＆＃34;更改道具＆＃34;触发的。只要更高的组件传入一组新的道具，React的生命周期函数就会运行。即使新道具与旧道具相同，反应仍将运行其所有生命周期方法。

归宿的重要性有两个原因：

每当你定义新道具时，react会将新道具与旧道具进行比较，并决定是否需要更新DOM。如果它们相同，则react不会更新DOM（即使所有生命周期方法都已运行）。
有时您需要自己的代码来比较新道具与旧道具（例如改变颜色或其他）。一些生命周期方法允许您访问新旧道具。为了使您的代码可靠，您需要确保在传递它们以做出反应之后道具不会改变。

事情正确的简化示例：

oldUser = { name: "Bill" }                          // points to object with name Bill
<Component user={oldUser}/>
newUser = Object.assign(oldUser, { name: "Dave" })  // new object
<Component user={newUser}/>

// newUser != oldUser (different objects): 
// react will run render function + update DOM

出现问题的示例：

oldUser = { name: "Bill" }  // points to object with name Bill
<Component user={oldUser}/>
newUser = oldUser           // newUser points to the same object as oldUser
newUser.name = "Dave"       // Now also oldUser.name == "Dave"
<Component user={newUser}/>

// newUser == oldUser (same objects + both have name "Dave"): 
// react will run render function, but will NOT update DOM

在REACT生命周期中，React props inmmutable vs Props更改

3 个答案: