亲宝软件园·资讯

展开

React State生命周期 React State状态与生命周期的实现方法

一枚小棋子 人气:0
想了解React State状态与生命周期的实现方法的相关内容吗,一枚小棋子在本文为您仔细讲解React State生命周期的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:React,State生命周期,React,State状态,下面大家一起来学习吧。

一、实现组件的方法:

组件名称首字母必须大写

1.通过JS函数方式实现组件

<div id="app"></div>
<script type="text/babel">
  var ReactDiv = document.getElementById('app');
  function GetReactComp(){
    return <p>我是react组件</p>
  }
  const hellocomp = < GetReactComp />  //首字母大写
  const reactSpan = (
    <span>
      { hellocomp }
    </span>
  )
  ReactDOM.render(reactSpan,ReactDiv)
</script>

2.通过ES6 class实现组件

<div id="class"></div>
<script type="text/babel">
  var reactDiv1=document.getElementById('class');
  //定义类组件
  class MyReactComp extends React.Component{
    render(){
      return (
        <h2>类组件</h2>
      )
    }
  }
  //使用类组件
  const testDiv = (
    <div>{<MyReactComp/>}</div>
  )
	//挂载
  ReactDOM.render(testDiv,reactDiv1)
</script>

二、props组件传值

React对props有严格的保护机制,一旦给定值,在组件中不允许被改变

<div id="app"></div>
<script type="text/babel">
  var reactDiv = document.getElementById('app');
  class ReactClassComp extends React.Component {
    render(){
      return (
      <div>
      <p>用户名:<input type="text" value={ this.props.name }/></p>
      <p>性别:<input type="text" value={ this.props.gender }/></p>
      </div>
      )
    }
  }

  ReactClassComp.defaultProps={
    name:'刘备',
    gender:'男'
  }
  const reactp=(
    <span>
      {<ReactClassComp />}  
    </span>
  )
  ReactDOM.render(reactp,reactDiv)
</script>

在这里插入图片描述

注意: 在很多场合中,组件的内容需要根据数据的刷新而刷新,这个时候就需要用到React提供的State

三、State状态

1.React生命周期 挂载(mount):

当组件实例被创建并插入DOM中时

(1)constructor(props) -->在组件挂载之前,会调用它的构造函数。如果不需要初始化state或不进行方法绑定,则不需要创建构造函数。

构造函数仅用于以下两种情况:

注意: 在constructor()函数中不要调用setState()方法。如果需要使用内部state,可直接在构造函数中为this.state赋值初始化state.

constructor(props){
	super(props);
		this.state = {
			date:new Date()
		}
		this.handleShow = this.handleShow.bind(this)
	
}

(2) render() -->必须要实现的

会检查this.props和this.state的变化并返回以下类型之一:

纯函数:在不修改组件state的情况下,每次调用都返回相同的结果,并且它不会直接与浏览器交互。
如果需与浏览器进行交互,在ComponmentDidMount()或其他生命周期中进行定义

(3) ComponmentDidMount() -->在组件挂载后立即调用。

注意: 可以在ComponmentDidMount()中直接调用setState()。它将触发额外渲染,但此渲染会发生在浏览器更新屏幕之前。保证了即使在render()两次调用的情况下,用户不会看到中间状态。

更新:

compomentDidUpdate(prevProps,prevProps,snapshot):更新后立即调用,首次渲染不会执行此方法,当组件更新后,可以在此处对DOM进行操作。

compomentDidUpdate(prevProps){
	if(this.props.userID !== prevProps.userID){
		this.fetchData(this.props.userID)
	}
}

注意: 若在compomentDidUpdate() 调用setState(),需要包裹在一个条件语句中,否则会导致死循环。还会导致额外的重新渲染,虽然用户不可见,但会影响组件性能。

卸载:

componentWillUnmount() -->在组件卸载及销毁之前直接调用。
注意: componentWillUnmount()中不应调用setState()方法,因为组件将永远不会重新渲染。组件实例卸载后,将永远不会再挂载它。

2.生命周期实例-->时钟:

<div id="app"></div>
<script type="text/babel">
  var reactDiv = document.getElementById('app')
  //定义类组件 MyStateComp 
  class MyStateComp extends React.Component {
    //构造函数
    constructor(props) {
      super(props); 
      //通过this.state初始化state内部
      this.state = {
        date:new Date(),
        show:false,
        text:'显示'
      }
      //为事件处理函数绑定实例
      this.handleShow = this.handleShow.bind(this)
    }
    //添加订阅
    componentDidMount() {
      this.timerID = setInterval(()=>this.tick(),1000)
    }
    //时间函数
    tick() {
      this.setState({  //setState更新组件的state
        date:new Date()
      })
    }
    //实例显示、隐藏
    handleShow() {
      this.setState(state=>({
        show: !state.show,
        text: !state.show?'隐藏':'显示'
      }))
    }
    //组件卸载:清空定时器
    componentWillUnmont() {
      clearInterval(this.timerID)
    }
    
    render() {
      let isShow=this.state.show;
      let element;
      if(isShow){
        element = <h2 >{this.state.date.toLocaleTimeString()}</h2> 
      }else{
        element = null
      }
      return (
        <div>
          <button onClick={this.handleShow}>{this.state.text}时间</button>
          {element}
        </div>
      )
    }
  }
  const reactSpan = (
    <span>
      {<MyStateComp/> }  
    </span>
  )
  ReactDOM.render(reactSpan,reactDiv)
</script>

在这里插入图片描述

加载全部内容

相关教程
猜你喜欢
用户评论