6

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

实际上，每次将对象文字作为 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>
     )
  }
}
4

3 回答 3

4

以前你不能在函数式组件中这样做（尽管你可以使用 memoization）但是现在由于 React 钩子的支持，你可以这样做：

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 时创建一个新对象。

于 2019-02-18T14:48:01.283 回答
2

您可以在组件中创建变量，如下所示：

import React from 'react';

const AnyComponent = (props) => {
 // if props.marginTop is an object
 const style = props.marginTop;

 return (
    <div style={style}>
        ...
    </div>
)};
于 2019-02-18T14:41:16.290 回答
1

一个对象可以用useMemo钩子来记忆：

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

由于useMemo旨在进行昂贵的计算并且有其自身的开销，因此这可能被认为是对div案例的过早优化。

于 2019-02-18T14:50:15.100 回答