react 子组件如何创建自已的作用域

在 React 中，子组件可以通过创建自己的作用域来隔离自己的状态和方法。常见的方式是使用类组件或函数式组件中的闭包。

对于类组件，可以在构造函数中使用 `bind` 方法来绑定方法的 this 指向，并在类组件中创建一个新的作用域。

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

对于函数式组件，可以使用 `useState` 或 `useReducer` 钩子来创建一个新的作用域。

function ChildComponent() {
  const [count, setCount] = React.useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

这样可以保证子组件状态的独立性，不会受到其他组件的影响。