React 类内部与外部的功能组件

Question

我想知道在 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>
}

Answer 1

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

如果您关心重用Bar 函数，那么您最好将其保留在class 之外，这样您就可以在其他地方使用import。

示例：

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