28-React state提升、组件组合或继承

时间:2021-09-29 15:32:23

Lifting State Up

state提升

  1. 对于在React应用程序中更改的任何数据,应该有一个单一的数据源。通常,都是将state添加到需要渲染的组件。如果其他组件也需要它,您可以将其提升到最接近的共同祖先。而不是尝试在不同组件之间同步状态,您应该依赖于自上而下的数据流。
  2. 如果一个值可以从props或state拿到(直接或间接),它就不应该保存在state里。

Composition vs Inheritance

组件组合或继承

React建议使用组合而不是继承来重用组件之间的代码。

请记住,组件可以接受任意props,包括普通类型的值,React元素或函数。

如果要在组件之间重用非UI功能,建议您将其提取到单独的JavaScript模块中。 组件可以导入它并使用该函数,对象或类,而不扩展它。

example:

<Dialog><p>content</p></Dialog>

<div>{props.children}</div> ---> <div><p>content</p></div>
<div>
<div>{props.left} </div>
<div>{props.right} </div>
</div> <SplitPane
left={ <Contacts /> }
right={ <Chat /> }
/>