React의 이전 라이프사이클과 새로운 라이프사이클의 차이점은 무엇입니까?
- 青灯夜游원래의
- 2022-07-13 19:13:461805검색
React의 이전 라이프 사이클과 새 라이프 사이클의 차이점은 다음과 같습니다. 1. 새 라이프 사이클에서는 세 개의 Will 후크(즉, componentWillMount, componentWillReceiveProps 및 componentWillUpdate)가 제거됩니다. 2. 새 라이프 사이클에는 getDerivedStateFromProps라는 두 개의 새로운 후크가 추가됩니다. (소품에서 파생된 상태 가져오기) 및 getSnapshotBeforeUpdate.
이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.
React는 버전 16.3 이전과 이후 두 세트의 라이프사이클을 가지고 있습니다. 16.3 이전에는 이전 버전이었고 이후에는 새 버전이었습니다. 이전 버전과 새 버전 간에 차이가 있지만 주요 기능은 유사합니다. .
React 라이프 사이클(이전)
다음을 강조할 가치가 있습니다: comComponentWillReceiveProps 함수는 props가 처음으로 전달될 때 호출되지 않고, 두 번째 이후에만 (포함) 호출됩니다. 두 번째) props가 전달될 때만 호출됩니다
shouldComponentUpdate밸브와 마찬가지로 이 업데이트의 상태를 다시 렌더링해야 하는지 여부를 결정하려면 반환 값(true 또는 false)이 필요합니다
React 라이프 사이클(신규)
React의 이전 라이프 사이클과 새 라이프 사이클의 차이점
새로운 라이프 사이클이 제거되었습니다세 가지 Will 후크, 즉 comComponentWillMount, componentWillReceiveProps, componentWillUpdate
새 라이프 사이클이 추가되었습니다. 두 개의 후크, 즉
1, getDerivedStateFromProps: props에서 파생된 상태를 가져옵니다.
는 props, state의 두 매개변수를 허용합니다.
은 상태 객체 또는 null을 반환합니다. , 상태 값을 수정하는 데 사용됩니다.
사용 시나리오: 언제든지 상태 값이 props에 따라 달라지는 경우 getDerivedStateFromProps
2를 사용할 수 있습니다. getSnapshotBeforeUpdate: 업데이트 전에 스냅샷을 가져옵니다(업데이트 전에 데이터를 가져올 수 있습니다)
DOM을 업데이트하기 전에
를 호출하면 객체 또는 null이 반환되고 반환 값은 componentDidUpdate
comComponentDidUpdate()로 전달됩니다. DOM
을 업데이트한 후 호출하면 preProps, preState, snapshotValue
사용 사례:
P 고정 높이를 사용하면 정기적으로 행을 추가하여 새 행을 추가할 때 현재 표시된 행의 높이가 변경되지 않도록 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4_getSnapShotBeforeUpdate的使用场景</title>
<style>
.list{
width: 200px;
height: 150px;
background-color: skyblue;
overflow: auto;
}
.news{
height: 30px;
}
</style>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
<script type="text/babel">
class NewsList extends React.Component{
state = {newsArr:[]}
componentDidMount(){
setInterval(() => {
//获取原状态
const {newsArr} = this.state
//模拟一条新闻
const 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 - height
}
render(){
return(
<div className="list" ref="list">
{
this.state.newsArr.map((n,index)=>{
return <div key={index} className="news">{n}</div>
})
}
</div>
)
}
}
ReactDOM.render(<NewsList/>,document.getElementById('test'))
</script>
</body>
</html>설명:
React v16.3에서는 새로운 라이프 사이클 변경이 이루어졌습니다. 이전 라이프사이클도 사용되지만 콘솔에 지원 중단 경고가 표시될 수 있습니다. 또한 세 가지 수명 주기 후크가 더 이상 사용되지 않으므로 사용하지 마세요. 또는 앞에 접두사 UNSAFE_를 추가할 수도 있습니다.
【관련 추천: Redis 비디오 튜토리얼】
위 내용은 React의 이전 라이프사이클과 새로운 라이프사이클의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!