React开始

一起来学React吧（2018.7.4——2）

    本人已经入职，公司前端使用React，作为一名小白还是要从头学起。

---

React的state，props和状态机

和大多数人理解的一样，React把组件看成状态机。状态改变就会重新渲染页面。state里存放了组件变化的数据，如果要创建state需要放在构造函数constructor中。根据ES6，constructor写法如下：

constructor(props) {
        super(props);
        this.state = {
            msg: 'hello world!'
        }
    }

其中，super()是必须的，参数可以不带，如果要用到constructor，就必须写上super。他是用来初始化this，如果不写会报this没有指向的错误。如果要在constructor中使用this.props就必须在super里加上参数，如果不需要constructor就可以省略，在render里面也能直接使用this.props获取父类参数。修改state的数据时，有统一的方法：this.setState，一旦修改了state，就会通过diffing算法重新去渲染页面，这个过程是异步的。根据官网的介绍，组件化开发是尽量创建无状态组件，就是没有state的组件。需要用到的数据从上级传过来就好，这就是props。

---

React的函数式组件和类组件

网上的很多文档里，都是函数式组件和类组件混合的。刚开始我也很纳闷为什么有时候是function，有时候又是class，这只是React组件实现的两种方式。相对来说，类组件使用更多，这有两个例子：

函数式组件：

import React from 'react';

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number,index) =>
        <li key={index}>{number}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
}

export default NumberList;

类组件：

import React, {Component} from 'react';

class Learnzu extends Component{

    render() {
        const numberss = this.props.numbers;
        const listItems = numberss.map((number,index) =>
            <li key={index}>{number}</li>
        );
        return(
            <ul>{listItems}</ul>
        );
    }
}

export default Learnzu;

这两个组件都实现了无序列表，在使用上也是一样的。这是函数式组件的代码会少一点，而且它是完全的无状态组件，也就是说没有state，没有this，也就不需要绑定this了。