javascript - 避免在 React 中由对象文字 : how to do with variables in the object? 引起的重新渲染

Question

我在这篇文章中读到React is Slow, React is Fast: Optimizing React Apps in Practice那:

In fact, each time you pass an object literal as prop to a child component, you break purity.

好的，我明白了。因此，最好避免这种情况是使用该对象创建一个变量，并将该变量插入到 prop 中，如下所示:

import React from 'react';

const style = { marginTop: 10 };
const AnyComponent = (props) => (
    <div style={style}>
        ...
    </div>
)

但是如果 style 属性依赖于接收到的属性怎么办？对象应该在哪里？ 例如，我有这个组件:

import React from 'react';

const AnyComponent = (props) => (
    <div style={{ marginTop: props.marginTop }}>
        ...
    </div>
)

这是一个好的做法吗:

import React from 'react';

const style = (marginTop) => ({ marginTop })
const AnyComponent = (props) => (
    <div style={style(props.marginTop)}>
        ...
    </div>
)

[编辑]我忘了说我的大多数组件都有状态，所以在这种情况下，这样做是个好主意吗:

import React from 'react';

class App extends React.Component {

  style = () => ({
    marginTop: this.props.marginTop
  })

  render() {
    return(
      <div style={this.style()}>

      </div>
     )
  }
}

Answer 1

以前，您无法在功能组件中执行此操作(尽管您可以使用内存功能) 但现在有了 React hooks，你可以做这样的事情:

const AnyComponent = (props) => {
    const style = useMemo(() => ({ marginTop: props.marginTop }), [props.marginTop]);
    <div style={style}>
        ...
    </div>
}

不，你不能使用这个:

import React from 'react';

const style = (marginTop) => ({ marginTop })
const AnyComponent = (props) => (
    <div style={style(props.marginTop)}>
        ...
    </div>
)

因为它还会通过每次调用样式函数在每次重新渲染 AnyComponent 时创建一个新对象。