react学习记录（三）——状态、属性、生命周期

react的状态state

　　React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

　　1、通过上边的代码可以看出页面中显示的时间是在state中的，但是在设置计时器后，没过一秒重新更新state的值，页面中显示出来的也会每隔一秒变化一次，说明页面中的内容是跟随数据的变化实时变化的，

　　2、时间的变化是因为在tick函数中进行了state的改变，而tick函数中改变state的值是在setState中执行的，所以state的值不能直接改变state，要通过setstate来改变

　　3、设置计时器和清除计时器是在两个函数中执行的，这两个函数是生命周期的钩子函数

react的属性props

　　react中的props属性是从父组件中获取的，也可以设置默认的属性，如果父组件没有传值的时候直接使用默认的属性

　　

class HelloMessage extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
HelloMessage.defaultProps = {
  name: 'Runoob'
};
 //此处如果传入name值使用的是给定的值，如果没有传入值的话使用的是Runoob
const element = <HelloMessage/>;
 
ReactDOM.render(
  element,
  document.getElementById('example')
);

　　props属性是不能被修改的，如果使用需要被修改的值要用state来代替props

react的生命周期

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：

• componentWillMount 在渲染前调用,在客户端也在服务端。

• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
  可以在你确认不需要更新组件时使用。

• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

• componentWillUnmount在组件从 DOM 中移除之前立刻被调用。