componentWillMount
1 .在渲染之前调用，在客户端也在服务器端
2 .
componentDidMount
1 .在第一次渲染后调用
2 .之后组件已经生成了对应的dom结构，可以通过this.getDomNode()来访问
3 .可以在这个方法中使用setTimeout或者ajax等异步操作
4 .
Mounting时涉及的函数
1 .constructor:加载的时候调用一次，可以初始化state
2 .getDefaultProps:设置默认的props,也可以使用defaultProps设置组件的默认属性
3 .getIniialState:初始化state,可以直接在constructor中定义this.state
4 .static getDerivedStateFromProps(props,state):组件每次render的时候，包括在组件创建之后，每次获取新的props,state之后，每次接收新的props之后都会返回一个对象作为新的state,返回null则说明不需要更新state,配合componentDidUpdate，可以替代componentWillReceiveProps
5 .static getDerviedStateFromProps()
6 .render
7 .componentDidMount
8 .componentWillMount:这个生命周期函数即将过期，新代码中应该避免使用他。
render()
1 .react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
2 .
componentWillReceiveProps
1 .组件接收到一个新的props，更新数据时调用，在初始render不会调用
2 .也就是只有父组件重新渲染，子组件接收到新的props才会触发更新
shouldComponentUpdate
1 .返回一个布尔值，在组件接收到新的props或者state调用，在初始化或者forceUpdate时不被调用
2 .在确认不更新组件时使用
componentWillUpdate
1 .返回一个布尔值，在组件接收到新的props或者state，但是没有render时调用，初始化不会被调用
componentDidUpdate
1 .组件完成更新之后调用，初始化时不会被调用
getSnapshotBeforeUpdate(prevProps, prevState)
1 .update发生的时候，每次获取新的props或者state之后，都会返回一个新的对象作为state,返回null则说明不会更新state
componentWillUnmount
1 .在组件从dom移除前辈调用
static getDerivedStateFromProps
1 .会在调用render方法之前调用，并且在初始挂载及其后续更新时每次都调用，他返回一个新的state对象来更新state,如果返回null则不会更新任何内容
2 .在state的值任何时候都取决于props.这个方法很实用
3 .但是这个方法会有一些bug，如果是以下几种情况，可以使用简单的替代方案
4 .不管什么原因，每次render的时候都会执行这个函数
getSnapshotBeforeUpdate
1 .在最近一次渲染输出之前调用，还未挂载到dom节点之前
2 .他使得组件能在发生更改之前从DOM中捕获一些信息，比如滚动位置，此生命周期的任何返回值都将作为参数传递给componentDidUpdate
1 .官方用法举例
class ScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// 我们是否在 list 中添加新的 items ？
// 捕获滚动位置以便我们稍后调整滚动位置。
if (prevProps.list.length < this.props.list.length) {
const list = this.listRef.current;
return list.scrollHeight - list.scrollTop;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
// 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
//（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
if (snapshot !== null) {
const list = this.listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
}
render() {
return (
<div ref={this.listRef}>{/* ...contents... */}</div>
);
}
}
错误处理
1 .componentDidCatch(error,info)
1 .此生命周期在后代组件抛出错误的时候被调用
2 .会在”提交“阶段被调用，因此允许执行副作用，应该用于记录一些错误日志之类的情况
2 .static getDerivedStateFromError
1 .会在后代组件抛出错误之后被调用，将抛出的错误当做参数，并返回一个新的值来更新state
2 .只会在渲染阶段调用，因此不允许出现副作用。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染可以显降级 UI
return { hasError: true };
}
render() {
if (this.state.hasError) {
// 你可以渲染任何自定义的降级 UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
forceUpdate
1 .默认情况下，当组件的state,props发生变化时，组件将会重新渲染。如果render方法依赖于其他数据，或者说想要页面立马渲染，可以调用forceUpdate强制让组件重新渲染
2 .调用forceUpdate会强制组件调用render方法，此时组件会跳过该组件的shouldComponentUpdate，但是子组件会触发正常的生命周期方法
3 .总的来说应该避免使用forceUpdate，尽量在render中使用this.props,this.state来触发框架更新
备注
1 .17的时候会删掉WillMount,ReceiveProps,WillUpdate
2 .官网不使用ES6的部分有介绍到这里的东西
1 .声明默认的props
var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'Mary'
};
},
})
2 .初始化state
getInitialState: function() {
return {count: this.props.initialCount};
},
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
注意
1 .willMount和willUpdate会被多次执行，so，不要放有副作用的处理。
挂载的时候
1 .constructor
2 .static getDerivedStateFromProps
3 .render
4 .componentDidMount
更新的时候:当props或state发生变化的时候会触发更新
1 .static getDerivedStateFormProps
2 .shouldComponentUpdate
3 .render
4 .getSnapshotBeforeUpdate
5 .componentDidUpdate
6 .componentWillUpdate,componentWillReceiveProps.这俩即将过期，不要使用
网友评论