React学习笔记

凡是使用 JSX 的地方，都要加上 type=”text/babel”

<script type="text/babel">
      // ** Our code goes here! **
    </script>

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言 并插入指定的 DOM 节点

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

1、JSX的使用：利用JSX编写DOM结构，可以用原声的HTML标签，也可以像普通标签一样引用React组件，这两者约定通过大小写来区分。
小写的字符串是HTML标签，大写开头的变量是React组件。
2、属性值使用表达式，用{}替换“”
3、子组件作为表达式使用
4、注释：在JSX中使用注释同Javascript，唯一要注意的就是在一个组件的子元素位置使用注释要用{}包起来

var content = (
    <Nav>
        {/*child comment,put {} around */}
        <Person
            /*multi
            line
            comment*/
            name={window.isLoggedIn ? window.name : ''}//end of line comment
/>
    </Nav>
);

5、扩展属性：传入的对象属性可以通过复制到组件的props上

var props = {};
props.foo = x;
props.bar = y;
var component = <Component{...props}/>

组件生命周期

主要包括组件的挂载，组件的更新，组件的移除
1、组建的挂载期
componentWillMount:组件渲染前执行且只执行一次componentDidMount:组件渲染后执行，只执行一次
2、组件的更新期
componentWillReceiveProps:当组件接手到新的props执行，它不会在初始化渲染时调用
shouldComponentUpdate:当有新的props或者state时，在render前调用，它也不会再初始渲染时调用
componentWillUpdate:当接收到新的props或状态时，在渲染前会被直接调用，它也不会再初始化渲染时调用componentDidUpdate:当组件更新到DOM后，这个方法被直接调用，它也不会在初始化渲染时调用
3、组件的移除
componentWillUnmount:组件从DOM移除前，被直接调用

组件间的通信

1、通过props属性传递，在父组件给子组件设置props，然后子组件就可以通过props访问到父组件的数据/方法，这样就搭建起了父子组件间通信的桥梁
2、父组件访问子组件：用refs
3、非父子组件间的通信，可以通过setState更新UI.这种模式在复杂应用中难维护，推荐使用redux（redux是JS状态容器，提供可预测化的状态管理，redux应用中只有一个单一的store）

组合组件

构建模块化组件，组装复杂应用
1、循环插入子元素：每个子元素都需要通过一个特殊key属性指定一个唯一值。key必须直接在循环中设置
2、this.props.children:组件标签里面包含的
子元素会通过props.children 传递进来。

核心概念：

1、在react中我们通过state来控制状态的改变，当项目变得足够庞大时，未来更好的维护state，我们引入redux来统一控制状态
2、要想更新state中的数据，需要发起一个action，Action就是一个普通javascript对象用来描述发生来什么

{
    type:"GET_HOT_PRODUCTS",
    data:{a:'1'}
}

3、为来把action和state串起来，开发一些函数，这就是reducer.reducer是一个纯函数，接收旧state和action，返回新的state