[英]What is the reason behind react component showing the changes of state inside them?
When we have many components in react project and sometimes we use multiple pre-made components for making a page.当我们在 react 项目中有很多组件时,有时我们会使用多个预制组件来制作页面。 While using
onChange
inside a component and showing the result of the state
, in this case, what functionality of components allows the value render of state
and how it works when we have multiple components inside other components.在组件内部使用
onChange
并显示state
的结果时,在这种情况下,组件的哪些功能允许state
的值呈现以及当我们在其他组件中有多个组件时它是如何工作的。 Here is an Ex...这是一个前...
function Component() {
const [value, setValue] = React.useState()
const handleChange = val => {
setValue(val)
}
return (
<React.Fragment>
<Compo1 //perform adding +1
onChange={handleChange}
/>
Value: {value} // 1
{console.log("value", value)} // showing right value
<Compo2>
<Compo3>
<Compo1 //perform adding +1
onChange={handleChange}
/>
Value:{value} // undefined
{console.log("value", value)} // showing right value
</Compo3>
{console.log("value", value)} // showing right value
</Compo2>
</React.Fragment>
)
}
render(<Component />)
In this case why console
is showing the right value but the state
variable value
is showing undefined.在这种情况下,为什么
console
显示正确的值但state
变量value
显示未定义。
The only way I can get that code to do what you say it does is when you incorrectly use React.memo on Compo3:我可以让该代码执行您所说的唯一方法是当您在 Compo3 上错误地使用React.memo时:
const Compo1 = ({ onChange }) => ( <button onClick={() => onChange(Date.now())}>+</button> ); const Compo2 = ({ children }) => <div>{children}</div>; const Compo3 = React.memo( function Compo3({ children }) { return <div>{children}</div>; }, () => true//never re render unless you re mount ); function Component() { const [value, setValue] = React.useState(88); const handleChange = React.useCallback(() => { setValue((val) => val + 1); }, []); return ( <React.Fragment> <Compo1 //perform adding +1 onChange={handleChange} /> works: {value}----- <Compo2> <Compo3> <Compo1 //perform adding +1 onChange={handleChange} /> broken:{value}----- </Compo3> </Compo2> </React.Fragment> ); } ReactDOM.render( <Component />, document.getElementById('root') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>
Maybe you can do the same if you do some wacky stuff with shouldComponentUpdate如果你用shouldComponentUpdate做一些古怪的事情,也许你也可以这样做
A component will render when:组件将在以下情况下呈现:
[value,setValue]=useState()
or when this.state
changes (when state changes).[value,setValue]=useState()
中的值或this.state
改变时(当 state 改变时)。value = useContext(someContext)
changes (even if value doesn't change).value = useContext(someContext)
中的 someContext 发生变化时(即使 value 没有变化)。value = useCustomHoom()
changes but this is not guaranteed for every hook.value = useCustomHoom()
中的值发生变化时,但这并不能保证每个钩子。 In the example the Compo3 wants to re render because Parent is re rendered due to a state change and passes different props (props.children).在示例中,Compo3 想要重新渲染,因为父级由于 state 更改而重新渲染并传递了不同的道具(props.children)。
Compo3 is not a functional component because it's wrapped in React.memo. Compo3 不是函数式组件,因为它包装在 React.memo 中。 This means that Compo3 will only re render if props changed (pure component).
这意味着 Compo3 只有在 props 改变时才会重新渲染(纯组件)。
The function passed as the second argument to React.memo can be used to custom compare previous props to current props, if that function returns true then that tells React the props changed and if it returns false then that tells React the props didn't change.作为第二个参数传递给 React.memo 的 function 可用于自定义比较以前的道具与当前道具,如果 function 返回 true 则告诉 React 道具已更改,如果返回 false 则告诉 React 道具未更改.
The function always returns true so React is never told that the props changed. function 总是返回 true ,所以 React 永远不会被告知 props 改变了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.