React의 이전 라이프사이클과 새 라이프사이클의 차이점은 다음과 같습니다. 1. 새 라이프사이클에서 세 개의 will 후크(즉, componentWillMount, componentWillReceiveProps 및 componentWillUpdate)가 제거되었습니다. 2. 두 개의 새로운 후크, 즉 getDerivedStateFromProps가 추가되었습니다. (소품 상태에서 파생됨) 및 getSnapshotBeforeUpdate.
이 튜토리얼의 운영 환경: Windows7 시스템, React18 버전, Dell G3 컴퓨터.
React는 버전 16.3 이전과 이후 두 세트의 라이프 사이클을 가지고 있습니다. 16.3 이전에는 이전 버전이었고 이후에는 새 버전이 있었지만 기본적으로는 동일합니다.
React 수명주기(이전)
props가 처음으로 전달될 때 componentWillReceiveProps 함수는 호출되지 않는다는 점을 강조할 가치가 있습니다. 이 함수는 props가 두 번째 이후에 전달될 때만 호출됩니다(두 번째 포함).
shouldComponentUpdate는 밸브와 유사하며 이 업데이트의 상태를 다시 렌더링해야 하는지 여부를 결정하기 위해 반환 값(true 또는 false)이 필요합니다.
React 수명주기(신규)
React의 이전 라이프사이클과 새로운 라이프사이클의 차이점
새로운 라이프 사이클에서는 세 가지 will 후크, 즉 componentWillMount, componentWillReceiveProps, componentWillUpdate가 제거됩니다.
새로운 라이프 사이클에는 다음과 같은 두 가지 새로운 후크가 추가됩니다.
1. getDerivedStateFromProps: props에서 파생된 상태 가져오기
두 개의 매개변수(props, state)를 허용합니다.
상태 값을 수정하는 데 사용되는 상태 개체 또는 null을 반환합니다.
사용 시나리오: 상태 값이 언제든지 props에 따라 달라지는 경우 getDerivedStateFromProps를 사용할 수 있습니다.
2. getSnapshotBeforeUpdate: 업데이트 전 스냅샷을 가져옵니다. (업데이트 전 데이터를 가져올 수 있습니다.)
DOM을 업데이트하기 전에 호출됩니다.
객체 또는 null을 반환하고 반환 값은 componentDidUpdate에 전달됩니다.
componentDidUpdate(): DOM을 업데이트한 후 호출됩니다.
preProps, preState, snapshotValue의 세 가지 매개변수를 허용합니다.
사용 사례:
높이가 고정된 p는 정기적으로 새 행을 추가하므로 새 행을 추가할 때 현재 표시된 행의 높이가 변경되지 않습니다.
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>4_getSnapShotBeforeUpdate 사용 시나리오</title><style>.list{너비: 200px;높이: 150px;배경색: 하늘색 ;overflow: auto;}.news{height: 30px;}</style></head><body><!-- "컨테이너" 준비 --><div id="test"></div >< !-- 반응 코어 라이브러리 소개--><script type="text/javascript" src="../js/17.0.1/react.development.js"></script><!-- 반응 -dom 소개 , DOM 작동을 위한 React 지원에 사용 --><script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script><!-- 소개 jsx를 js로 변환하는 babel --><script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type=" text/babel" >class NewsList 확장 React.Component{ state = {newsArr:[]} componentDidMount(){setInterval(() => {//원래 상태 가져오기 const {newsArr} = this.state//뉴스 시뮬레이션 const news = ' News'+ (newsArr.length+1)//상태 업데이트 this.setState({newsArr:[news,...newsArr]})}, 1000);} getSnapshotBeforeUpdate(){return this.refs.list .scrollHeight} componentDidUpdate(preProps,preState,height){this.refs.list.scrollTop += this.refs.list.scrollHeight - 높이} render(){return(<div className="list" ref="list"> {this. state.newsArr.map((n,index)=>{return <div key={index} className="news">{n}</div>})}</div>)}}ReactDOM. NewsList/>,document.getElementById('test'))</script></body></html>설명하다:
React v16.3에서는 새로운 라이프사이클 변경이 이루어졌습니다. 이전 라이프사이클도 사용되지만 콘솔에 지원 중단 경고가 표시될 수 있습니다. 또한 세 가지 수명 주기 후크가 더 이상 사용되지 않으므로 사용하지 마세요. 또는 앞에 UNSAFE_ 접두사를 추가할 수 있습니다.