React学习之State

本文基于React v16.4.1

初学react,有理解不对的地方,欢迎批评指正^_^

一、定义组件的两种方式

1、函数定义组件

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

2、类定义组件

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

  这两种方式都可以定义一个组件,区别在于类定义的组件有State和生命周期。另外,还要注意的是组件名称要以大写字母开头。

二、为组件添加State

如下,是官网的一个例子:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  render() {
    return (
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
    );
  }
}

  可以看到,上面的代码在类中添加了constructor()方法,并在其中初始化了this.state 。

  关于constructor() :constructor()方法是类必须有的,如果没写,会自动添加。

  关于super(props) :super()方法将父类中的this对象继承给子类,添加参数props,就可以使用this.props 。

三、使用State

  1、不能直接修改State

初始化this.state只能在constructor()里面,修改State要用setState()方法。

2、可能是异步的

  调用setState,组件的state并不会立即改变,setState只是把要修改的状态放入一个队列中,React会优化真正的执行时机,并且React会出于性能原因,可能会将多次setState的状态修改合并成一次状态修改,所以不能用当前的state来计算下一个state。例如下面的写法是错误的:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});  

  应改为: 

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

  3、state的更新是浅合并的

例如,下面的state中有title和comments两个变量,当调用this.setState({title: 'react'})修改title时,react会把新的title合并进去,不会改变comment。           

constructor(props) {
    super(props);
    this.state = {
      title: 'abc',
      comments: []
    };
  }

【补】

今天遇到了一个问题,react会渲染两次state,一次是初始设置的state,一次是set后的state。

原因:因为react渲染机制造成组建挂载之前,也就是componentDidMount生命周期之前自动获取了原始的state数据,componentDidMount之后state变化已经无法再次获取了。

解决办法:设置一个state,例如hasFetch: false,在set时把hasFetch设为true,根据hasFetch的值判断是否是set后的值。

END-------------------------------------

    

posted @ 2018-06-29 10:18  麦豇豆  阅读(271)  评论(0编辑  收藏