React杂碎知识

类组件与函数式组件的区别是类允许在其中添加本地状态（state）和生命周期钩子。

唯一可以分配 this.state 的地方是构造函数。

状态提升（Lifting State Up）

在一个React应用中，对于任何可变的数据都应该遵循“单一数据源”原则，通常情况下，state首先被添加到需要它进行渲染的组件。然后，如果其它的组件也需要它，你可以提升状态到它们最近的祖先组件。你应该依赖从上到下的数据流向，而不是试图在不同的组件中同步状态。

提升状态相对于双向绑定方法需要写更多带的“模板”代码，但是有一个好处，它可以更方便的找到和隔离bugs。由于任何state（状态）都“存活”在若干的组件中，而且可以分别对其独立修改，所以发生错误的可能大大减少，另外，你可以实现任何定制的逻辑来拒绝或者转换用户输入。

如果某个东西可以从props（属性）或者state（状态）中得到，那么他可能不应该在state（状态）中。

组合与继承 （Composition & Inheritance）

一些组件在设计前无法获知自己要使用什么子组件，尤其在SideBar和Dialog等通用“容器”中比较常见。
建议这种特别使用的children prop来直接传递 子元素到他们的输出中：

function FancyBorder(props) {
    return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
        </div>
    );
}

这允许其它组件通过嵌套JSX传递任意子组件给它们。

function WelcomDialog() {
    return (
        <FancyBorder color="blue">
            <h1 className="Dialog-title">
                Welcome
            </h1>
            <p className="Dialog-message">
                Thank you for visiting our spacecraft!
            </p>
        </FancyBorder>
    );
}

也有这种需要多个“占位符”的情况：

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

插件安装

--save和--save-dev的区别

npm install时使用--save和--save-dev的区别，可分别将依赖（插件）记录到package.json中的dependencies和devDependencies下面。

dependencies下记录的是项目在运行时必须依赖的插件，常见的例如react jquery等，即使项目打包好了、上线了，这些也是需要用的，否则程序无法正常执行。

生命周期

• getInitialState
• render
• componentDidMount
• shouldComponentUpdate
• componentDidUpdate
• componentWillUnmount

智能组件和木偶组件

containers中放智能组件（私有组件）；components中放木偶组件（通用性比较强的）

其他知识

key={index}有助于React的渲染优化，jsx中的{}可放一个可执行的 js 程序或者变量