2

我想知道在 React 类组件中耦合/嵌套功能组件而不通过参数显式传递道具并this.props通过父类使用的效果是什么。我知道在 React 类组件之外拥有一个功能组件更容易测试和阅读，但我很想知道使用this.props与props通过参数之间在性能/渲染方面的确切区别是什么。

例如：

class Foo extends React.Component {
  bar = () => { return (<p>{this.props.baz}</p>) }

  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
      {this.bar()}
    )
  }
}

比。

class Foo extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
      <Bar baz={'foobar'}
    )
  }
}
function Bar(props) {
  return <p>{props.baz}</p>
}
4

1 回答 1

3

两者都给出相同的结果，除非您关心代码的可重用性。

如果您关心重用该Bar功能，那么您最好将其保留在外部，class以便您可以import在其他地方使用。

例子：

如果Bar呈现success或warning消息。您需要为系统中的所有警告消息保持相同的设计。现在，如果每个component人都有自己的警告消息代码，您将无法轻松编辑警告消息设计，而且您必须一遍又一遍地重写相同的代码。

于 2020-01-09T18:44:05.607 回答