一起来学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了。