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

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 /> }
 />