Javascript React getDerivedStateFromProps（）的使用

我正在探索React，对生命周期方法和亲子沟通有些困惑。具体地说，我正在尝试创建一个组件，它包装一个select元素，并在选择“Other”选项时添加一个输入框。我已经使用

getDerivedStateFromProps（）

实现了这一点，但根据最新版本，这种生命周期方法应该很少使用。因此我的问题是：在这种情况下，我是否应该注意并使用另一种模式

这是我的代码，值和选项作为道具传递，父组件的

handleChange（）

方法也是如此。因此，当在select或input元素中进行更改时，首先更新父组件状态，并通过

props.value

传递一个新值

export default class SelectOther extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    static getDerivedStateFromProps(props) {
        let optionIndex = -1;
        for (let i = 0; i < props.options.length; i++) {
            if (props.options[i].value === props.value) {
                optionIndex = i;
                break;
            }
        }
        if (optionIndex > -1) {
            return {
                selected: props.options[optionIndex].value,
                text: "",
                showInput: false
            };
        } else {
            return {
                selected: "",
                text: props.value,
                showInput: true
            };
        }
    }

    handleChange(e) {
        this.props.handleChange({
            "target": {
                "name": this.props.name,
                "value": e.target.value
            }
        });
    }

    render() {
        return (
            <div>
                <label>{ this.props.label }</label>
                <select name={ this.props.name } value={ this.state.selected } onChange={ this.handleChange }>
                    {
                        this.props.options.map(option => <option key={option.value} value={option.value}>{option.label}</option>)
                    }
                    <option value="">Other</option>
                </select>
                {
                    this.state.showInput &&
                        <div>
                            <label>{ this.props.label } (specify other)</label>
                            <input type="text" className="form-control" value={ this.state.text } onChange={ this.handleChange }></input>
                        </div>
                }
            </div>
        )
    }
}

导出默认类选择其他扩展组件{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
}
静态getDerivedStateFromProps（props）{
设optionIndex=-1；
for（设i=0；i-1）{
返回{
所选：props.options[optionIndex].value，
正文：“，
showInput:false
};
}否则{
返回{
选定：“，
文本：props.value，
showInput:true
};
}
}
手变（e）{
这个。道具。把手换({
“目标”：{
“name”：this.props.name，
“价值”：即目标价值
}
});
}
render（）{
返回(
{this.props.label}
{
this.props.options.map（option=>{option.label}）
}
其他
{
this.state.showInput&&
{this.props.label}（指定其他）
}
)
}
}

您可以通过不让SelectOther具有任何状态来简化，下面是一个示例，说明如何传递一个函数，该函数将分派一个操作以更改值。由于SelectOther是纯组件，因此不会不必要地重新渲染：

//使其成为纯组件，这样它就不会重新渲染
const SelectOther=React.memo（函数SelectOther({
标签，
名称
价值
选项，
handleChange，
}) {
console.log（'in render'，name，value）；
常量showInput=！选项
.map（o=>o.value）
.包括（价值）；
返回(
{label}
{options.map（option=>(
{option.label}
))}
其他
{showInput&&(
{label}（指定其他）
)}
);
});
常量应用=（）=>{
//在应用程序生命周期中创建一次选项
const options=React.usemo(
() => [
{value:'one'，label:'one label'}，
{value:'two'，label:'two label'}，
],
[]
);
//创建一个状态以保存输入值并提供
//基于动作创建新状态的减速器
const[state，dispatch]=React.useReducer(
（状态，{type，payload}）=>{
//如果操作类型为“更改”，则更改
//payload.name字段到payload.value
如果（类型==‘更改’）{
常量{name，value}=payload；
返回{…状态，[名称]：值}；
}
返回状态；
},
//输入的初始状态
{
我的名字：''，
其他输入：选项[0]。值，
}
);
//使用React.useCallback创建回调
//不改变的函数。这将是
//如果使用useState而不是useReducer，则更难
const handleChange=React.useCallback(
（{target:{name，value}}）=>{
派遣({
键入：“更改”，
有效载荷：{
名称
价值
},
});
},
[]
);
返回(
);
};
//渲染应用程序
ReactDOM.render(
,
document.getElementById（'root'））
);