javascript - react -使用方法进行样式设置是一种很好的做法

Question

我有一个简单的 React 应用程序，这个应用程序的一些组件需要动态样式。是否允许使用方法，因为还有一些其他推荐的方法可以做到这一点？一切正常，但我不想使用一些反模式。

例如

class MyComponent extends React.Component {
  // ...
  block_style() {
   if (!!this.state.folder.image) {
     return {"backgroundImage": "url(" + this.state.folder.image + ")";
   } else {
     return {"backgroundColor": "orange"};
   }
  }

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

Answer 1

这种方法存在三个问题，使其不是一个好的选择。

首先是您在 render() 函数中绑定(bind)函数。问题是当您 bind() 时，它实际上返回了一个新函数。由于您是在 render() 函数中创建的，因此每次渲染时，它都会看到新函数并始终重新渲染，从而创建许多不必要的渲染。您应该始终在 constructor() 或其他只会发生一次的地方进行绑定(bind)。

第二个很简单，就是在使用它的地方不需要bind()。您只需要在上下文可能丢失的情况下不立即调用它(例如将其传递给事件处理程序)时进行绑定(bind)。如果您立即调用它，那么您就有了上下文，无需绑定(bind)。

第三个与第一个类似。即使修复了 bind 问题，因为该函数返回一个新对象，您也会遇到与第一个问题类似的问题。由于它总是一个新对象(即使它包含相同的数据)，它每次都会触发 React 重新渲染，从而创建很多不必要的渲染。

相反，更好的方法是在更新 state.folder 并创建和存储样式的同时更新 state:

someFuncWhereYouUpdateFolder() {
  const folder = getFolder();
  this.setState({
    folder,
    style: folder.image 
      ? { backgroundImage: `url(${folder.image})` } 
      : { backgroundColor: 'orange' }
  });
}

然后，您只需在渲染中使用该样式即可:

render() {
  return (
    <div style={ this.state.style }>
     { /* stuff */ }
    </div>
  );
}

有关不在 render() 中创建对象的更多信息，请参阅 this 等文章(特别是#6)和this .