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

Question

有人可以评论一下 React 中放置样式变量的区别吗:

• 在类组件函数之外，但在组件脚本中，与
• 在组件主体中，但在 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 值不会改变，这在您的场景中似乎就是这种情况]