Question

我想知道在不通过params显式传递props并通过父类使用this.props的情况下，将功能组件耦合/嵌套在React类组件内部的效果如何。我了解到，在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()}
    )
  }
}

VS。

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都有自己的警告消息代码，您将无法轻松地编辑警告消息设计，还必须一遍又一遍地重写相同的代码

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

1 个答案: