基于当前状态的React中的setState

Question

在React中更新有状态组件时,当组件使用当前状态更新新状态时,它被认为是一种不好的做法.

例如,如果我有一个类来存储过滤器是否处于打开状态,那么在性能方面,更新状态的其中一个选项是否比另一个更理想？

选项1:

class Container extends Component {
    state = {
        show: false
    }

    show = () => this.setState({ show: true })

    hide = () => this.setState({ show: false })

    render() {
        <ExternalComponent
            show={this.show}
            hide={this.hide}
        />
    }
}

选项2:

class Container extends Component {
    state = {
        show: false
    }

    toggleVisibility = () => this.setState({ show: !this.state.show })

    render() {
        <ExternalComponent
            toggleVisibility={this.toggleVisibility}
        />
    }
}

选项3:

class Container extends Component {
    state = {
        show: false
    }

    setShow = (newVal) => this.setState({ show: newVal })

    render() {
        <ExternalComponent
            setShow={this.setShow}
        />
    }
}

Answer 1

组件访问其自身状态没有任何问题.只写状态不会非常有用!但是,在将组件状态或状态更改方法暴露给其他组件时应该非常小心.组件状态是内部的,只能通过经过深思熟虑的界面从外部触摸,以防止组件变得纠结.

实际上,有一个示例与React文档中的示例#2类似:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

但请注意与您的示例的不同之处.切换方法需要在构造函数中绑定,以确保this表示您期望它的含义.

如果包装组件是跟踪ExternalComponent子组件可见性的组件,那么我不希望将toggle方法传递给子组件,我希望包装器呈现某种类型的隐藏/显示可供件,然后传递当前将子组件作为道具可见性或有选择地渲染它(请注意,选择性渲染将导致整个子组件在再次启用时重新装入,这可能很昂贵;您可能最好隐藏它而不是将其拆除并重新创建它).这使得关注点分工清晰:包装器知道可见性,子组件不需要知道如何或为什么做出决策,也不需要触及包装器的内部状态.