样式变量在 React 类组件中的正确放置

Question

有人可以评论一下放置样式变量之间的 React 差异：

• 在类组件函数之外，但在组件脚本中，与
• 在组件主体中，但在 return 语句之外，与
• 在 return 语句中，但在呈现函数之外，与
• 在渲染函数中

这些中的每一个都会起作用，但我不知道为什么一个可能比另一个更可取。

export default class MyComponent extends Component {
    putStyleHere = { color: '#eee' }
    render() {
        const orPutStyleHere2 = { color: '#eee' }
        return (
            const orPutStyleHere3 = { color: '#eee' }
            <p style={putStyleHere}>Hello, world!</p>
        )
    }
}
const orPutStyleHere4 = { color: '#eee' }

提前谢谢。

Answer 1

最好在

渲染函数之外使用常量，这样它们就不会在每次渲染时被重新声明/重新分配 [只要 const 值不会改变，这在您的场景中似乎是这种情况]