设计思想：将项目按照功能分为一个一个的组件，不同的组件之间可以复用，功能之间应该低耦合，使得开发效率得以提升。

// 可以通过返回nul的方式来阻止组件被渲染 function WarningBanner(props) { if (!props.warn) { return null; }

return (
    <div className="warning">
      Warning!
    </div>
  );
}

props，可以大概理解为常量，定以后不可修改,通常用来传递参数。而state只在交互的时候使用。

类继承 class Calculator extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = {temperature: ''}; }

handleChange(e) {
      this.setState({temperature: e.target.value});
    }

    render() {
      const temperature = this.state.temperature;
      return (
        <fieldset>
          <legend>输入一个摄氏温度</legend>
          <input
            value={temperature}
            onChange={this.handleChange} />

          <BoilingVerdict
            celsius={parseFloat(temperature)} />

        </fieldset>
      );
    }
  }

componentDidMount 在组件加载完毕后会立即执行

关于在 constructer 中 调用 super 调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this super(props)的目的：在constructor中可以使用this.props

redux 出现原因：需要一个全局的state对象，可以在子组件触发某些动作更新全局的可能用到这个属性的事件的时候，动态的更新全局的state的属性，并重新渲染页面。

state 和 prop 的区别 state 接管组件本身的数据，prop作为变量向下传递。

开发：

全局安装 create-react-app

npm install -g create-react-app

生成项目，项目名 my-app（自定义）

create-react-app my-app
  cd my-app

redux npm install i --save redux npm install i --save react-redux npm install i --save redux-actions npm install i --save react-router-dom npm install i --save redux-thunk yarn add chalk

打包

npm run build

在组件嵌套中，通过props来传递属性值。 在父组件中，直接给组件附属性值：

<HeadNav preLink={preLink} title={title} />

在子组件中，通过this.props获得属性

{this.props.title}

为了解决兼容性问题，可以通过 babel-polyfill 来实现，在应用入口引入：

import 'babel-polyfill';

ant 按需加载： webpack 中加入，在react 中，应位于 oneOf 这个数组里面 的 plugins 里面 ["import", { "libraryName": "antd-mobile", "style": "css" }]