이 글은 React의 setState 메커니즘에 대한 간략한 소개를 제공합니다. 이는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
api 분석: setState(updater, [콜백])
updater: 데이터 업데이트 FUNCTION/OBJECT
callback: 성공적인 업데이트 후 콜백 FUNCTION
// updater - Function this.setState((prevState, props) => { return {counter: prevState.counter + props.step}; }); // update - Object this.setState({quantity: 2})
setState의 특징:
1. 업데이트해야 하는 구성 요소를 일괄적으로 업데이트한 다음 렌더링 성능을 보장하기 위해 한꺼번에 업데이트합니다
2. 얕은 병합 Objecr.sign()
문제 및 솔루션
setState를 사용하여 상태를 변경한 후 즉시 this.state를 통해 최신 상태를 가져옵니다.
해결 방법: componentDidUpdate 또는 setState의 콜백 함수에서
// setState回调函数 changeTitle: function (event) { this.setState({ title: event.target.value }, () => this.APICallFunction()); }, APICallFunction: function () { // Call API with the updated value }
를 가져옵니다. 업데이트하려면 개체 메서드를 사용하여 두 번 누적해야 한다는 요구 사항이 있습니다.
해결 방법: 업데이터 기능을 사용하세요
onClick = () => { this.setState({ index: this.state.index + 1 }); this.setState({ index: this.state.index + 1 }); } // 最后解析为,后面的数据会覆盖前面的更改,所以最终只加了一次. Object.assign( previousState, {index: state.index+ 1}, {index: state.index+ 1}, ) //正确写法 onClick = () => { this.setState((prevState, props) => { return {quantity: prevState.quantity + 1}; }); this.setState((prevState, props) => { return {quantity: prevState.quantity + 1}; }); }
권장 사항:
1. shouldComponentUpdate 메서드를 직접 사용자 정의하지 않는 한 render() 함수에 setstate()를 쓰지 마세요. 그렇지 않으면 무한 루프가 발생합니다
2. 상태에 값을 직접 할당할 수 없으므로 렌더링이 발생하지 않습니다. 예: this.state.num = 2
3. 배열 및 개체와 같은 참조 개체에 대해 작업할 때는 새 개체
배열을 반환하는 메서드를 사용하세요. push, pop, Shift, unshift, splice, 그러나 concat, Slice, filter, 확장 구문 사용
개체: Object.assgin/확장 구문
setState 업데이트 메커니즘
그림에 표시된 대로: 보류 중인 대기열 및 업데이트 대기열
위 내용은 React의 setState 메커니즘에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!