뉴 라이프 사이클
마운팅 (로딩 단계 4 후크 기능에 관한)
건설자()
加载的时候调用一次，可以初始化state정적 getDerivedStateFromProps (소품 상태)
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法세우다()
react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行componentDidMount ()
组件渲染之后调用，只调用一次업데이트 (갱신 단계 5 후크 기능 포함)
정적 getDerivedStateFromProps (소품 상태)
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法shouldComponentUpdate (nextProps, nextState)
组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）세우다()
react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行getSnapshotBeforeUpdate (prevProps, prevState)
触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法componentDidUpdate ()
组件加载时不调用，组件更新完成后调用언 마운트 (언로드 단계 : 후크 함수를 포함하는)
组件渲染之后调用，只调用一次오류 처리 (오류 처리)
componentDidCatch (오류, 정보)
任何一处的javascript报错会触发쓰기의 기본 구성 요소
가져 오기 '반응'에서, {구성 요소} 반작용
수출 기본 클래스 NewReactComponent는 구성 요소를 {확장
생성자 (버팀대) {
슈퍼 (소품)
// getDefaultProps : 수신 초기 소품
// getInitialState 그 : 초기화 주
}
상태 = {
}
getDerivedStateFromProps 정적 (소품 주) { // 각 조립되고 다시 쓰게의 구성 요소가, (종래 실제 로딩 DOM에 가상 DOM 후에) 각각의 새로운 취득 내장 각 수신 상태 소품 후에 포함한 시간; 새로운 후 소품은 새로운 상태로 객체를 반환 한 후, 반환 다음 주 업데이트 할 필요를 null
반환 상태
}
componentDidCatch (오류, 정보) { // 오류 자바 스크립트를 가져옵니다
}
() {렌더링
창 (
<H2> 신규 React.Component </ H2>
)
}
componentDidMount () { //은 일단 장착
}
shouldComponentUpdate (nextProps, NextState) { // 소품이나 상태 변화 트리거 조립, 사실 : 업데이트, 거짓없는 업데이트
반환 true로
}
getSnapshotBeforeUpdate (prevProps, PrevState) { // 업데이트 트리거 조립 전에
}
componentDidUpdate () { // 업데이트 트리거 조립 한 후
}
componentWillUnmount () { // 트리거 구성 요소가 제거 될 때
}
}
개요
오래된 수명주기
뉴 라이프 사이클
- React16 새로운 라이프 사이클은 componentWillMount, componentWillReceivePorps, componentWillUpdate 포기
- 추가 getDerivedStateFromProps , getSnapshotBeforeUpdate 세 후크 함수 대신 포기 (componentWillMount, componentWillReceivePorps, componentWillUpdate)
- React16이 세 후크 기능을 삭제하지,하지만 후크 기능을 추가 할 수 없습니다 (getDerivedStateFromProps, getSnapshotBeforeUpdate) 혼합, React17은 삭제됩니다 componentWillMount, componentWillReceivePorps, componentWillUpdate
- 오류의 추가 처리 (componentDidCatch)
-
(1) 정적 getDerivedStateFromProps (소품 상태)
참고 :
가장 일반적인 오해입니다
getDerivedStateFromProps및componentWillReceiveProps경우에만 소품라는 것 "변화." 사실, 한 부모가 다시 렌더링 한,이 두 기능의 수명주기에 관계없이 소품, 기억은 더 없다 "변화는."getDerivedStateFromProps단 하나의 목적의 존재는 : 소품이 변경 될 때 구성 요소 업데이트 상태로 만들려면名词“受控”和“非受控”通常用来指代表单的 inputs，但是也可以用来描述数据频繁更新的组件。用 props 传入数据的话，组件可以被认为是受控（因为组件被父级传入的 props 控制）。数据只保存在组件内部的 state 的话，是非受控组件（因为外部没办法直接控制 state）
设计组件时，重要的是确定组件是受控组件还是非受控组件。在实际应用中，组件一般都会有受控组件和非受控组件。
任何数据，都要保证只有一个数据来源（明确的数据来源），而且避免直接复制它
constructor(props) { super(props); // 不要这样做 this.state = { color: props.color }; }这种情况可能会造成数据来源不只一个（如果使用也setState更新color的话），并且可能会造成父组件props.color改变子组件state里的color并没有改变。解决方法是：（1）完全做成受控组件，不用state，由props进行控制（2）只有在你刻意忽略props更新的时候使用，应将 props.color 重命名为 props.initialColor或 props.defaultColor非受控组件，后续更新完全由setState控制不要直接复制（mirror） props 的值到 state 中，而是去实现一个受控的组件，然后在父组件里合并两个值。比如，不要在子组件里被动的接受
props.value并跟踪一个临时的state.value，而要在父组件里管理state.draftValue和state.committedValue，直接控制子组件里的值。这样数据才更加明确可预测。对于不受控的组件，当你想在 prop 变化（通常是 ID ）时重置 state 的话，可以选择一下几种方式：
- 建议: 重置内部所有的初始 state，使用
key属性（当key变化时， React 会创建一个新的而不是更新一个既有的组件） - 选项一：仅更改某些字段，观察特殊属性的变化（比如
props.userID）。 - 选项二：使用 ref 调用实例方法
派生状态会导致代码冗余，并使组件难以维护。 确保你已熟悉这些简单的替代方案：
-
如果你需要执行副作用（例如，数据提取或动画）以响应 props 中的更改，请改用
componentDidUpdate。 -
如果只想在 prop 更改时重新计算某些数据，请使用 memoization helper 代替。
-
如果你想在 prop 更改时“重置”某些 state，请考虑使组件完全受控或使用
key使组件完全不受控 代替。
2、getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate()在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给componentDidUpdate()此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等
- 建议: 重置内部所有的初始 state，使用