揭秘React样式处理及组件通信的秘诀

所谓CSS-in-JS，就是在JS中编写CSS。React是以组件组合的形式组织的，所以组件间的嵌套关系有很多种可能性。我们常以发布/订阅模式来举例子。

// 创建事件对象
const events = new Events();

// 订阅事件
events.on('greet', function(name) {
  console.log(`Hello, ${name}!`);
});

// 发布事件
events.emit('greet', 'John');

在处理事件的过程中，我们需要特别注意：

• 事件监听器必须在事件触发之前注册。
• 组件被卸载时，必须取消事件监听。

// 取消事件监听
events.removeListener('greet', function(name) {
  console.log(`Hello, ${name}!`);
});

除了发布/订阅模式，还有其他多种方式实现组件通信，比如：

• Props：通过父组件向子组件传递数据。
• Context API：通过全局对象向组件传递数据。

// 父组件
class ParentComponent extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        <ChildComponent count={this.state.count} />
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        Count: {this.props.count}
      </div>
    );
  }
}

// 使用Context API
const CountContext = React.createContext();

// 父组件
class ParentComponent extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <CountContext.Provider value={this.state.count}>
        <ChildComponent />
      </CountContext.Provider>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    const count = React.useContext(CountContext);

    return (
      <div>
        Count: {count}
      </div>
    );
  }
}

选择哪种组件通信方式取决于具体的业务需求。