react学习记录——状态属性生命周期

Posted 2022-03-12 wyongz

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 中移除之前立刻被调用。