getDerivedStateFromProps中缺少prevProps的解决方案

朋友您好！

因此，React的开发人员决定使我们的工作更加线性，也就是说，可以说，我们忽略了犯错误和编写错误代码的机会最小的途径，我认为这是我们不可剥夺的权利，也是改进和发明的一种方式。 我们正在谈论componentWillReceiveProps的所有喜欢的方法以及同一系列中的其他方法，这里不会再有其他方法了，但是将以静态方法getDerivedStateFromProps的形式给出替代方法。 就个人而言，这让我想起了东西所在的黑暗房间，需要找到它们，但看不到任何东西。

开发人员在对React用户的愤怒评论的回应中写道：好吧，我们不会给您prevProps，这是不可能的，请您想一想，prevProps不会，您会呆在那儿，只是将它们缓存在一个状态中，总的来说，他们建议我们用小拐杖新的好代码。 当然，这一切都很简单，您可以理解和原谅，但令我感到烦恼的是，现在我没有这种背景，我的房间被砖砌起来，看不到任何东西，甚至邻居都听不到，所以我决定为自己写点东西，它会隐藏所有拐杖，我的代码看起来很奇怪，但是没有骨头（和没有骨头？）。

总的来说，我需要在组件的状态下实现prevProps，我也希望一切看起来都像往常一样，而且在静态getDerivedStateFromProps中没有神奇的东西也无法生存（这是一个傻瓜！）。 经过两天的折磨和自我完善，一切准备就绪，我生了一只老鼠。

安装方式

npm install --save state-master 

使用方法

只需编写相同的getDerivedStateFromProps和componentDidUpdate，但已对其进行了修改。
我们将组件包装在“ withStateMaster”中，并在其中传递您需要跟踪其更改的“道具”列表

 import {Component} from 'react' import {withStateMaster, registerContext, unregisterContext} from 'state-master'; //  "",     const PROP_LIST = ['width', 'height', 'bgColor', 'fontSize', 'autoSize']; //   ,     const PROP_LIST = 'value'; //     const INITIAL_STATE = { width: 1000, height: 500 }; class ContainerComponent extends Component { static displayName = 'Container'; static getDerivedStateFromProps(data) { const { nextProps, prevProps, state, isInitial, changed, changedProps, isChanged, add, addIfChanged, isChangedAny, addIfChangedAny, isChangedAll, call, get } = data; //      ,   ,      PROPS_LIST //   ,       if (isInitial) { //   "name"    "value"     add('name', value); //   "name"       add('name'); } // changedProps  ,       if (changedProps.indexOf('value') !== -1) { add('value'); } //  true   prop -  if (isChanged('autoSize')) { add('autoSize'); } //  true   prop     (  true) if (isChanged('autoSize', true)) { add('autoSize', true); } // changed  true,     -  if (changed) { add('somethingChanged', true); } //  true,     -  //   ,     if (isChangedAny()) { add('somethingChanged', true); } //  true,      -  if (isChangedAny('bgColor', 'fontSize', ...)) { const {bgColor, fontSize} = nextProps; add('style', {bgColor, fontSize}); } //  true,      PROPS_LIST -  if (isChangedAll()) { add('allChanged', true); } //  true,      -  if (isChangedAll('width', 'height', ...)) { const {width, height} = nextProps; add('size', width + 'x' + height); //     //   ,   setTimeout(() => this.changeSomething(), 0); //   - ,        //       componentDidUpdate call(() => { this.initNewSizes(width, height); }); } //   "add",   prop -  addIfChanged('name', value); addIfChanged('name'); //   "add",  - prop   PROPS_LIST -  addIfChangedAny('name', value); addIfChangedAny('name'); //      null //   ,  ,     //    console.log(get()); //     "add",      //      ,       "add" return { size: nextProps.width + 'x' + nextProps.height } } constructor(props) { super(props); //  "registerContext",    this   getDerivedStateFromProps //     ,     "registerContext",       registerContext(this); } //      componentDidUpdate(data) { const { prevProps, prevState, snapshot, changedProps, changed, isChanged, isChangedAny, isChangedAll } = data; if (isChanged('value')) { const {value} = this.props; this.doSomeAction(value); } } componentWillUnmount() { //    ,  "registerContext"     unregisterContext(this); } render() { const {style, size} = this.state; return ( <div className="container" style={style}> Size is {size} </div> ) } } export const Container = withStateMaster(ContainerComponent, PROP_LIST, INITIAL_STATE); 

如果组件是从另一个组件继承的，则传递父组件，以便调用父组件的getDerivedStateFromProps

 export const Container = withStateMaster(ContainerComponent, PROP_LIST, null, ParentalComponent); 

这是我对这个问题的解决方案（尽管也许我对反应没有足够的了解，但这根本不是问题）。

因此，我抵制了React的新规范，也许有一天我会谦卑自己，重写一切。

尽管开发人员可能会再次重做所有操作，但还会出现其他紧迫的问题。
就是这样，我躺下了，但他们并没有像他们所说的那样打败卧床不起的人。