React의 이전 라이프사이클과 새로운 라이프사이클의 차이점은 무엇입니까?-프런트엔드 Q&A-php.cn

React의 이전 라이프사이클과 새로운 라이프사이클의 차이점은 무엇입니까?

青灯夜游

풀어 주다： 2022-07-13 19:13:46

원래의

1856명이 탐색했습니다.

React의 이전 라이프 사이클과 새 라이프 사이클의 차이점은 다음과 같습니다. 1. 새 라이프 사이클에서는 세 개의 Will 후크(즉, componentWillMount, componentWillReceiveProps 및 componentWillUpdate)가 제거됩니다. 2. 새 라이프 사이클에는 getDerivedStateFromProps라는 두 개의 새로운 후크가 추가됩니다. (소품에서 파생된 상태 가져오기) 및 getSnapshotBeforeUpdate.

React의 이전 라이프사이클과 새로운 라이프사이클의 차이점은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, React18 버전, Dell G3 컴퓨터.

React는 버전 16.3 이전과 이후 두 세트의 라이프사이클을 가지고 있습니다. 16.3 이전에는 이전 버전이었고 이후에는 새 버전이었습니다. 이전 버전과 새 버전 간에 차이가 있지만 주요 기능은 유사합니다. .

React 라이프 사이클(이전)

React의 이전 라이프사이클과 새로운 라이프사이클의 차이점은 무엇입니까?

다음을 강조할 가치가 있습니다: comComponentWillReceiveProps 함수는 props가 처음으로 전달될 때 호출되지 않고, 두 번째 이후에만 (포함) 호출됩니다. 두 번째) props가 전달될 때만 호출됩니다

shouldComponentUpdate밸브와 마찬가지로 이 업데이트의 상태를 다시 렌더링해야 하는지 여부를 결정하려면 반환 값(true 또는 false)이 필요합니다

React 라이프 사이클(신규)

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 = &#39;新闻&#39;+ (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(&#39;test&#39;))
</script>
</body>
</html>

로그인 후 복사

설명:

React v16.3에서는 새로운 라이프 사이클 변경이 이루어졌습니다. 이전 라이프사이클도 사용되지만 콘솔에 지원 중단 경고가 표시될 수 있습니다. 또한 세 가지 수명 주기 후크가 더 이상 사용되지 않으므로 사용하지 마세요. 또는 앞에 접두사 UNSAFE_를 추가할 수도 있습니다.

【관련 추천: Redis 비디오 튜토리얼】

위 내용은 React의 이전 라이프사이클과 새로운 라이프사이클의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!