Question

使用有状态的React组件时，我经常遇到这种情况。

我需要对道具进行一些操作 - 要么做我现在想要在render()中进行的一些处理，要么根据道具中的值设置状态。

我想在最初安装组件时以及更新道具时这样做，我最终会得到一个类似这样的样板代码：

constructor(){
    super(props)
    const modifiedProps = doSomethingWithProps(props)
        ...
    this.state = {initialState}
}

componentWillReceiveProps(nextProps) {
    const modifiedProps = doSomethingWithProps(nextProps)
         ...
    this.setState({newState})
}

doSomethingWithProps(props){
        ...
}

有更好的方法吗？

Answer 1

基于问题的评论回答，我觉得这很有帮助 -

如果需要根据props完成大量工作，componentWillMount允许您在帮助程序功能中使用this.setState()并最大限度地减少工作量;在constructor完成。这可以清理一堆其他重复的代码。

constructor(){
    super(props)
    this.state = {initialState}
}

componentWillMount() {
    this.doSomethingWithProps(this.props);
}

componentWillReceiveProps(nextProps) {
    this.doSomethingWithProps(nextProps)
}

doSomethingWithProps(props){
    ...
    this.setState({newState})
}

Answer 2

为什么不在转换后将道具传递给组件？

这可以通过以下几种方式实现：

使用一个简单的无状态容器，它可以转换道具并将它们传递给这个组件。

export const Container = (props) =>
    <YourComponent modifiedProp={doSomethingWithProps(props)} />

使用connected component并在mapStateToProps方法内进行转换：

const mapStateToProps = (state, ownProps) => ({
    modifiedProp: doSomethingWithProps(ownProps)
});

export const ConnectedComponent = connect(mapStateToProps)(YourComponent);

第一个选项实际上是第二个选项的精简版本。

您可能还有兴趣使用selectors来计算传递给组件的派生道具。

React组件构造函数和componentWillReceiveProps中的公共代码

2 个答案: