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

Question

我想知道将功能组件耦合/嵌套在 React class 组件中而不通过参数显式传递 props 并通过父 class 使用 this.props 会产生什么影响是。我知道在 React class 组件之外有一个功能组件更容易测试和阅读，但我很想知道通过参数使用 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 都有自己的警告消息代码，您将无法轻松编辑警告消息设计，您还必须一遍又一遍地重写相同的代码.

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

Functional components inside vs outside of React class

javascript

reactjs

react-functional-component