Question

我不知道哪种分配要传递给子组件的道具的方法是正确的（在React的正确性（语法，通用做法）和效率上），以及是否有更好的方法来实现这一点，请让我知道。

因此，当前在我的项目中，我有一个父组件，该组件获取一些数据并将其传递给子对象（实际上，我将进一步封装它，并让一个子对象获取数据，但是我仍然对此感到好奇适当的解决方案）。

我的代码是这样的：

class Dashboard extends Component {

    constructor(props) {
        super(props)

        this.state = {
            a: 'foo',
            b: 'bar',
            stats: {
                c: 'c',
                d: 'd'
            }
        }
    }

    someFunction = () => {

    }

  render() {
    let childData = this.state.stats
    childData.function = this.someFunction

    return (
      <div>
        <ChildComponent {...childData}/>
      </div>
    )
  }
}

您可能会看到，我为render()内的子组件分配了所有数据，并且确实没有特定的原因。在观看React的内容时，我在Lynda的一个视频中看到了这一点，我很喜欢。我相信我可以做到这一点：

constructor(props) {
    super(props)

    this.state = {
        a: 'foo',
        b: 'bar',
        stats: {
            c: 'c',
            d: 'd'
        }
    }

    let childData = this.state.stats
    childData.function = this.someFunction 
}

我想知道其中的哪一种（如果有的话）是更“反应”的方式，还是有更好的方式？我是否正确地认为可能存在性能问题，因为每次渲染父组件时都会分配这些数据？如果是这样，那么如果我将逻辑移到构造函数上，是否可以将其最小化，所以赋值仅发生一次？

感谢帮助！

Answer 1

所以我想说这些选项都不是“反应方式”。考虑到您的确切组件，我会说以下是最常见的：

class Dashboard extends Component {
  constructor(props) {
    super(props)

    this.state = {
      a: 'foo',
      b: 'bar',
      stats: {
        c: 'c',
        d: 'd',
      },
    }
  }

  someFunction = () => {}

  render() {
    return (
      <div>
        <ChildComponent
          stats={this.state.stats}
          handleSomeEvent={this.someFunction}
        />
      </div>
    )
  }
}

但这只是16.8之前的版本中最常见的方式。现在最常见的方式是这样：

function Dashboard() {
  const [state, setState] = useState({
    a: 'foo',
    b: 'bar',
    stats: {
      c: 'c',
      d: 'd',
    },
  })

  const someFunction = () => {}

  return (
    <div>
      <ChildComponent 
        stats={state.stats} 
        handleSomeEvent={someFunction} 
      />
    </div>
  )
}

Answer 2

是的，这可能是正确的方法。

昂贵的部分是操纵DOM。 React缓解了性能下降的困扰，您可以通过使用PureComponent或memo函数来声明您的子组件，以寻求帮助。

纯组件和已记忆的功能组件进行浅比较，并且仅在浅比较失败时才重新呈现。在shouldComponentUpdate中为PureComponent完成了浅比较。您也可以在“普通” shouldComponentUpdate中实现自己的Component函数。如果返回false，则您的子组件将不会重新渲染。

因此重申。将属性分配给子组件是否会产生开销-是的，但是，与您的应用程序将面临的其他开销相比，这并没有很多。

关于非反应特定答案。代码应该是可读和可理解的。创建一个仅用于分解对象的中间对象没有任何意义。

所以这个：

let childData = this.state.stats
childData.function = this.someFunction

不是真的需要。而是直接分配给您的组件

为子组件分配道具的正确方法

2 个答案: