一、你知道初始化state的正确姿势吗？
相信有很多码友在初始化state的时候会使用以下的方式：
class ExampleComponent extends React.Component {
state = {};
componentWillMount() {
this.setState({
currentColor: this.props.defaultColor,
palette: 'rgb',
});
}
}
这可就麻烦了，因为componentWillMount只会在加载阶段执行一次，虽然setState会引发render，但是这个时候还没有第一次render所以setState后我们的界面仍不会有改变。故而我们不应该在componentWillMount里进行state的初始化，正确的姿势请看下方代码
class ExampleComponent extends React.Component {
state = {
currentColor: this.props.defaultColor,
palette: 'rgb',
};
}
class ExampleComponent extends React.Component {
constructor(props){
super(props)
this.state={
currentColor: props.defaultColor,
palette: 'rgb',
}
}
这两种方式都可以，没有优劣之分，但是如果你需要在constructor里面去绑定事件函数，就需要使用第二种啦
二、获取外部数据需要注意哦
我们搞一个页面，免不了的就是去获取外部数据，那究竟我们应该在何时何地获取它最为合理恰当呢？相信这也是多数才接触react的码友的困恼之处。我们先来看看容易犯错的地方，即在componentWillMonut里面去获取外部数据
class ExampleComponent extends React.Component {
state = {
externalData: null,
};
componentWillMount() {
this._asyncRequest = loadMyAsyncData().then(
externalData => {
this._asyncRequest = null;
this.setState({externalData});
}
);
}
componentWillUnmount() {
if (this._asyncRequest) {
this._asyncRequest.cancel();
}
}
render() {
if (this.state.externalData === null) {
// Render loading state ...
} else {
// Render real UI ...
}
}
}
大家都知道，componentWillMonut是在render之前被调用，也就是说这时候是还没有渲染出dom结构的，及时获取到数据也没有办法渲染到页面中，而且在之后即将到来的react17将采用异步渲染，componentWillMonuti将可能会被调用多次，如果在里面进行获取数据这些异步操作，会导致多次请求，所以正确的姿势如下
class ExampleComponent extends React.Component {
state = {
externalData: null,
};
componentDidMount() {
this._asyncRequest = loadMyAsyncData().then(
externalData => {
this._asyncRequest = null;
this.setState({externalData});
}
);
}
componentWillUnmount() {
if (this._asyncRequest) {
this._asyncRequest.cancel();
}
}
render() {
if (this.state.externalData === null) {
// Render loading state ...
} else {
// Render real UI ...
}
}
}
我们应该在componentDidMount里面进行获取外部数据操作，这时组件已经完全挂载到网页上，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。
还有就是，我们如果需要进行订阅，也不要在componentWillMount里面进行订阅，应该在componentDidMount里面进行订阅，在componentWillUnmount里面取消订阅
三、根据props更新state
往往在比较复杂的页面中，我们免不了通过props传递属性给子组件，子组件通过props来更新自身的state，且看以往我们的做法：
class ExampleComponent extends React.Component {
state = {
isScrollingDown: false,
};
componentWillReceiveProps(nextProps) {
if (this.props.currentRow !== nextProps.currentRow) {
this.setState({
isScrollingDown:
nextProps.currentRow > this.props.currentRow,
});
}
}
}
我们常常会在componentWillReceiveProps这个生命周期里去比较新旧props来更新state，但随着新的生命周期getDerivedStateFromProps的出现，我们就不应该再使用这种方式了，而应该使用getDerivedStateFromProps：
class ExampleComponent extends React.Component {
// Initialize state in constructor,
// Or with a property initializer.
state = {
isScrollingDown: false,
lastRow: null,
};
static getDerivedStateFromProps(props, state) {
if (props.currentRow !== state.lastRow) {
return {
isScrollingDown: props.currentRow > state.lastRow,
lastRow: props.currentRow,
};
}
// Return null to indicate no change to state.
return null;
}
}
您可能会注意到，在上面的示例中，该props.currentRow状态已镜像（如state.lastRow）。这样就可以getDerivedStateFromProps按照中的相同方式访问先前的props值componentWillReceiveProps。下面是官方给出的未提供prevProps的理由：
您可能想知道为什么我们不只是将先前的prop作为参数传递给getDerivedStateFromProps。我们在设计API时考虑了此选项，但最终出于以下两个原因而决定：
prevProps首次getDerivedStateFromProps调用（实例化之后）的参数为null
，要求在每次prevProps访问时都添加if-not-null检查。
不将先前的props传递给此功能是朝着将来的React版本释放内存的一步。（如果React不需要将先前的prop传递到生命周期，那么它就不需要将先前的props对象保留在内存中。）
四、props改变产生的副作用
有时候，当props改变时，我们会进行一些除更新state之外的操作，比如调用外部方法，获取数据等，以前我们可能一股脑的将这些操作放在componentWillReceiveProps中，像下面这样：
// Before
class ExampleComponent extends React.Component {
componentWillReceiveProps(nextProps) {
if (this.props.isVisible !== nextProps.isVisible) {
logVisibleChange(nextProps.isVisible);
}
}
}
但这是不可取的，因为一次更新可能会调用多次componentWillReceiveProps，因此，重要的是避免在此方法中产生副作用。相反，componentDidUpdate应该使用它，因为它保证每次更新仅被调用一次：
class ExampleComponent extends React.Component {
state = {
externalData: null,
};
static getDerivedStateFromProps(props, state) {
// Store prevId in state so we can compare when props change.
// Clear out previously-loaded data (so we don't render stale stuff).
if (props.id !== state.prevId) {
return {
externalData: null,
prevId: props.id,
};
}
// No state update necessary
return null;
}
componentDidMount() {
this._loadAsyncData(this.props.id);
}
componentDidUpdate(prevProps, prevState) {
if (this.state.externalData === null) {
this._loadAsyncData(this.props.id);
}
}
componentWillUnmount() {
if (this._asyncRequest) {
this._asyncRequest.cancel();
}
}
render() {
if (this.state.externalData === null) {
// Render loading state ...
} else {
// Render real UI ...
}
}
_loadAsyncData(id) {
this._asyncRequest = loadMyAsyncData(id).then(
externalData => {
this._asyncRequest = null;
this.setState({externalData});
}
);
}
}
像上面的代码一样，我们应该将状态更新与获取外部数据分离开来，将数据更新移至componentDidUpdate。
五、如何优雅的获取更新前的dom属性
我们常常会有这样的需求，就是在组件更新后我要保留一些更新前的属性，这就需要在更新前做相关的保存操作。在新的生命周期getSnapshotBeforeUpdate还没有出来之前，我们实现这一需求的方式就只有在componentWillUpdate去手动保存我们需要的属性，在componentDidUpdate里去使用：
class ScrollingList extends React.Component {
listRef = null;
previousScrollOffset = null;
componentWillUpdate(nextProps, nextState) {
// Are we adding new items to the list?
// Capture the scroll position so we can adjust scroll later.
if (this.props.list.length < nextProps.list.length) {
this.previousScrollOffset =
this.listRef.scrollHeight - this.listRef.scrollTop;
}
}
componentDidUpdate(prevProps, prevState) {
// If previousScrollOffset is set, we've just added new items.
// Adjust scroll so these new items don't push the old ones out of view.
if (this.previousScrollOffset !== null) {
this.listRef.scrollTop =
this.listRef.scrollHeight -
this.previousScrollOffset;
this.previousScrollOffset = null;
}
}
render() {
return (
<div ref={this.setListRef}>
{/* ...contents... */}
</div>
);
}
setListRef = ref => {
this.listRef = ref;
};
}
但是这样会有许多弊端，使用异步渲染时，“渲染”阶段生命周期（如componentWillUpdate和render）和“提交”阶段生命周期（如componentDidUpdate）之间可能会有延迟。如果用户在此期间进行了诸如调整窗口大小的操作，则scrollHeight从中读取的值componentWillUpdate将过时。
解决此问题的方法是使用新的“提交”阶段生命周期getSnapshotBeforeUpdate。在进行突变之前（例如在更新DOM之前）立即调用此方法。它可以返回一个值，以使React作为参数传递给componentDidUpdate，在发生突变后立即被调用。如下：
class ScrollingList extends React.Component {
listRef = null;
getSnapshotBeforeUpdate(prevProps, prevState) {
// Are we adding new items to the list?
// Capture the scroll position so we can adjust scroll later.
if (prevProps.list.length < this.props.list.length) {
return (
this.listRef.scrollHeight - this.listRef.scrollTop
);
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// If we have a snapshot value, we've just added new items.
// Adjust scroll so these new items don't push the old ones out of view.
// (snapshot here is the value returned from getSnapshotBeforeUpdate)
if (snapshot !== null) {
this.listRef.scrollTop =
this.listRef.scrollHeight - snapshot;
}
}
render() {
return (
<div ref={this.setListRef}>
{/* ...contents... */}
</div>
);
}
setListRef = ref => {
this.listRef = ref;
};
}
这两个生命周期一定是成双成对出现的，不然会报错，而且在getSnapshotBeforeUpdate中的返回值会直接作为componentDidUpdate的参数传递进去，并不需要我们去手动保存状态。十分的方便。
以上就是我对react的生命周期的用法的一些总结，如有不对之处，还望各位读者不吝赐教，谢谢大家。
网友评论