看起来它将componentWillReceiveProps
在即将发布的版本中完全淘汰,取而代之的是新的生命周期方法getDerivedStateFromProps
:static getDerivedStateFromProps()。
经检查,它看起来像你现在无法作出直接比较this.props
和nextProps
,就像你可以在componentWillReceiveProps
。有没有办法解决?
而且,它现在返回一个对象。我是否正确假设返回值本质上是this.setState
?
以下是我在网上找到的示例:状态源自props / state。
之前
class ExampleComponent extends React.Component {
state = {
derivedData: computeDerivedState(this.props)
};
componentWillReceiveProps(nextProps) {
if (this.props.someValue !== nextProps.someValue) {
this.setState({
derivedData: computeDerivedState(nextProps)
});
}
}
}
后
class ExampleComponent extends React.Component {
// Initialize state in constructor,
// Or with a property initializer.
state = {};
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.someMirroredValue !== nextProps.someValue) {
return {
derivedData: computeDerivedState(nextProps),
someMirroredValue: nextProps.someValue
};
}
// Return null to indicate no change to state.
return null;
}
}
有关删除的componentWillReceiveProps
:你应该能够与组合来处理它的用途getDerivedStateFromProps
和componentDidUpdate
,看到的阵营博客文章,例如迁移。是的,返回的对象getDerivedStateFromProps
类似于传递给的对象更新状态setState
。
万一您确实需要道具的旧值,可以随时使用以下内容将其缓存在状态中:
state = {
cachedSomeProp: null
// ... rest of initial state
};
static getDerivedStateFromProps(nextProps, prevState) {
// do things with nextProps.someProp and prevState.cachedSomeProp
return {
cachedSomeProp: nextProps.someProp,
// ... other derived state properties
};
}
任何不影响状态的东西都可以放入componentDidUpdate
,甚至还有一个getSnapshotBeforeUpdate
用于底层的东西。
更新:要了解新的(和旧的)生命周期方法,react-lifecycle-visualizer软件包可能会有所帮助。
正如我们最近发布的博客作出反应,在绝大多数情况下,你并不需要getDerivedStateFromProps
在所有。
如果只想计算一些派生数据,请执行以下任一操作:
- 就在里面做
render
- 或者,如果重新计算比较昂贵,请使用类似的备忘录助手
memoize-one
。
这是最简单的“之后”示例:
import memoize from "memoize-one";
class ExampleComponent extends React.Component {
getDerivedData = memoize(computeDerivedState);
render() {
const derivedData = this.getDerivedData(this.props.someValue);
// ...
}
}
查看博客文章的此部分以了解更多信息。
正如丹·阿布拉莫夫(Dan Abramov)所述
在渲染内部执行
实际上,我们将这种方法与备忘录一起用于任何用于状态计算的代理道具。
我们的代码看起来像这样
// ./decorators/memoized.js
import memoizeOne from 'memoize-one';
export function memoized(target, key, descriptor) {
descriptor.value = memoizeOne(descriptor.value);
return descriptor;
}
// ./components/exampleComponent.js
import React from 'react';
import { memoized } from 'src/decorators';
class ExampleComponent extends React.Component {
buildValuesFromProps() {
const {
watchedProp1,
watchedProp2,
watchedProp3,
watchedProp4,
watchedProp5,
} = this.props
return {
value1: buildValue1(watchedProp1, watchedProp2),
value2: buildValue2(watchedProp1, watchedProp3, watchedProp5),
value3: buildValue3(watchedProp3, watchedProp4, watchedProp5),
}
}
@memoized
buildValue1(watchedProp1, watchedProp2) {
return ...;
}
@memoized
buildValue2(watchedProp1, watchedProp3, watchedProp5) {
return ...;
}
@memoized
buildValue3(watchedProp3, watchedProp4, watchedProp5) {
return ...;
}
render() {
const {
value1,
value2,
value3
} = this.buildValuesFromProps();
return (
<div>
<Component1 value={value1}>
<Component2 value={value2}>
<Component3 value={value3}>
</div>
);
}
}
它的好处是,你不需要代码吨比较样板里面的getDerivedStateFromProps
或者componentWillReceiveProps
你可以跳过复制粘贴初始化一个构造函数中。
注意:
如果您有一些内部状态逻辑,则此方法仅用于将道具代理到状态,它仍需要在组件生命周期中进行处理。
每当您要在渲染之前更新状态并使用prop的条件进行更新时,都将使用getDerivedStateFromProps
GetDerivedStateFromPropd借助props值更新统计信息值
文章标签:javascript , lifecycle , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!