반응의 수명주기 기능은 다음과 같습니다: 1. componentWillMount 함수, 3. shouldComponentUpdate 함수, 5. componentWillUnmount 함수,
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.
React의 수명주기 기능은 무엇인가요?
React의 라이프 사이클 기능(매우 상세함)
더 이상 고민하지 말고 바로 본론으로 들어가겠습니다!
먼저 React의 라이프사이클 기능을 살펴보겠습니다.
컴포넌트가 마운트되려고 할 때 트리거되는 함수: componentWillMount
컴포넌트가 마운트될 때 트리거되는 함수 마운트 완료: componentDidMount
데이터가 업데이트될 때 트리거되는 함수: shouldComponentUpdate
데이터가 업데이트될 때 트리거되는 함수: componentWillUpdate
데이터 업데이트가 완료될 때 트리거되는 함수: componentDidUpdate
The 컴포넌트가 파괴될 때 트리거되는 함수: componentWillUnmount
props 값이 변경될 때 트리거되는 함수 상위 컴포넌트: componentWillReceiveProps
코드를 자세히 설명하겠습니다
1. 마운팅 부분
공식에 따르면 라이프 사이클 다이어그램에서 컴포넌트의 로딩 및 렌더링이 defaultProps 및 propsTypes(이 두 가지가 무엇인지는 다음 기사에서 별도로 논의할 예정이며 여기서는 중점적으로 다루지 않습니다.)
그런 다음 생성자와 this.state 데이터 에 초기 콘텐츠가 있으므로 첫 번째 단계는 다음과 같습니다. 그러면 comComponentWillMount 구성요소가 마운트되기 시작합니다. 이것이 두 번째 단계입니다. 그런 다음 컴포넌트가 마운트되고, 렌더링 분석 및 렌더링되므로 세 번째 단계가 곧 발생합니다. 즉, 렌더 데이터가 모두 렌더링되고, 마지막으로 comComponentDidMount
컴포넌트 마운트가 완료됩니다.
하위 컴포넌트 코드, 상위 컴포넌트에 렌더링을 도입하기만 하면 됩니다(여기서는 코드에 들어가지 않습니다)
import React ,{Component} from 'react' class Smzq extends Component{ constructor(props){ console.log('01构造函数') super(props) this.state={ } } //组件将要挂载时候触发的生命周期函数 componentWillMount(){ console.log('02组件将要挂载') } //组件挂载完成时候触发的生命周期函数 componentDidMount(){ console.log('04组件将要挂载') } render(){ console.log('03数据渲染render') return( <div> 生命周期函数演示 </div> ) } } export default Smzq
콘솔을 열어서 확인하세요
2. 데이터 업데이트 부분
데이터가 업데이트되면 첫 번째 단계는 shouldComponentUpdate로 데이터 업데이트 여부를 확인하는 것입니다. 이 함수가 true를 반환하면 업데이트됩니다. 이 함수는 두 개의 매개변수 nextProps 및 nextState를 선언할 수 있습니다.
nextProps는 상위 구성요소를 하위 구성요소로, nextState는 데이터가 업데이트된 후의 값이며, 이 두 값은 이 함수에서 얻을 수 있습니다. 두 번째 단계에서는 업데이트 데이터를 확인한 후 comComponentWillUpdate가 데이터를 업데이트합니다. 세 번째 단계는 여전히 render입니다. 네 번째 단계는 comComponentDidUpdate 데이터 업데이트를 완료하는 것입니다.
코드 측면에서는 이전 부분을 기반으로 하위 구성 요소가 this.state에 초기 데이터를 정의하고 이 데이터를 렌더링에 바인딩한 다음 이 데이터를 변경하기 위해 onClick 이벤트를 선언하는 버튼을 추가합니다. 이렇게 하면 데이터 업데이트 부분의 효과를 볼 수 있습니다. 여기서는 코드의 첫 번째 부분을 삭제하여 덜 지저분해 보이도록 했습니다.
import React ,{Component} from 'react' class Smzq extends Component{ constructor(props){ super(props) this.state={ msg:'我是一个msg数据' } } //是否要更新数据,如果返回true才会更新数据 shouldComponentUpdate(nextProps,nextState){ console.log('01是否要更新数据') console.log(nextProps) //父组件传给子组件的值,这里没有会显示空 console.log(nextState) //数据更新后的值 return true; //返回true,确认更新 } //将要更新数据的时候触发的 componentWillUpdate(){ console.log('02组件将要更新') } //更新数据时候触发的生命周期函数 componentDidUpdate(){ console.log('04组件更新完成') } //更新数据 setMsg(){ this.setState({ msg:'我是改变后的msg数据' }) } render(){ console.log('03数据渲染render') return( <div> {this.state.msg} <br> <hr> <button>this.setMsg()}>更新msg的数据</button> </div> ) } } export default Smzq
3.ComponentWillReceiveProps에 대해 별도로 이야기해 보겠습니다. 상위 컴포넌트에서 props 값이 변경될 때 트리거되는 함수
이 함수는 상위 컴포넌트에 값을 전달할 때 props 값이 변경될 때 트리거됩니다. 자식 컴포넌트 함수, 방금 두 번째 부분에서 shouldComponentUpdate 함수가 두 개의 매개변수를 전달할 수 있다고 언급했는데, nextProps는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 값입니다
부모 컴포넌트에 초기 제목 데이터를 정의하고, 선언하는 버튼을 작성하세요. onClick 이벤트 이 제목을 변경하세요
IV. componentWillUnmount 구성 요소가 소멸되려고 할 때의 함수
상위 구성 요소에서 플래그를 true로 사용하여 상태 값을 정의하고 onClick 이벤트를 선언하는 버튼을 추가하세요.
이 플래그를 다음으로 변경하세요. 구성요소를 파괴합니다.
상위 구성 요소 코드:
import React, { Component } from 'react'; import Smzq from './components/Smzq' class App extends Component { constructor(props){ super(props) this.state={ flag:true, title:"我是app组件的标题" } } //创建/销毁组件 setFlag(){ this.setState({ flag:!this.state.flag }) } //改变title setTitle(){ this.setState({ title:'我是app组件改变后的title' }) } render() { return ( <div> { this.state.flag?<smzq></smzq>:'' } <button>this.setFlag()}>挂载/销毁生命周期函数组件</button> <button>this.setTitle()}>改变app组件的title</button> </div> ); } } export default App;
하위 구성 요소의 전체 코드:
import React ,{Component} from 'react' class Smzq extends Component{ constructor(props){ super(props) this.state={ msg:'我是一个msg数据' } } //组件将要挂载时候触发的生命周期函数 componentWillMount(){ console.log('02组件将要挂载') } //组件挂载完成时候触发的生命周期函数 componentDidMount(){ //Dom操作,请求数据放在这个里面 console.log('04组件挂载完成') } //是否要更新数据,如果返回true才会更新数据 shouldComponentUpdate(nextProps,nextState){ console.log('01是否要更新数据') console.log(nextProps) //父组件传给子组件的值,这里没有会显示空 console.log(nextState) //数据更新后的值 return true; //返回true,确认更新 } //将要更新数据的时候触发的 componentWillUpdate(){ console.log('02组件将要更新') } //更新数据时候触发的生命周期函数 componentDidUpdate(){ console.log('04组件更新完成') } //你在父组件里面改变props传值的时候触发的函数 componentWillReceiveProps(){ console.log('父子组件传值,父组件里面改变了props的值触发的方法') } setMsg(){ this.setState({ msg:'我是改变后的msg数据' }) } //组件将要销毁的时候触发的生命周期函数,用在组件销毁的时候执行操作 componentWillUnmount(){ console.log('组件销毁了') } render(){ console.log('03数据渲染render') return( <div> 生命周期函数演示--{this.state.msg}--{this.props.title} <br> <hr> <button>this.setMsg()}>更新msg的数据</button> </div> ) } } export default Smzq
点击挂载/销毁生命周期函数组件这个按钮的时候
子组件消失,控制台打印:组件销毁了。
当父组件给子组件传值时
这里nextProps这个就有上图划红线的值了。
那么我们再点击改变app组件的title这个按钮
这里可以看到componentWillReceiveProps这个函数被触发了,nextProps这个值也发生了改变。
到这里就全部结束了,可能写的不够清晰,不知道有没有人能看完,over。
推荐学习:《react视频教程》
위 내용은 React의 라이프사이클 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!