React 开发中常被忽略的几个实用模式

2023-09-21 22:42:13

在 React 开发中，掌握一些常用的模式可以大大简化开发过程并提高代码的可维护性。本文将介绍几个经常被忽略但非常实用的 React 模式，包括受控组件、非受控组件、高阶组件、渲染属性和 context。

受控组件

受控组件是 React 中的一种组件，其值由父组件管理。这意味着父组件通过 props 将数据传递给子组件，子组件再通过回调函数将值传递回父组件。这种模式通常用于表单元素，因为父组件可以轻松控制表单元素的值并对用户输入做出响应。

class App extends Component {
  state = {
    value: ''
  };

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

非受控组件

非受控组件是 React 中的另一种组件，其值由组件自身管理。这意味着组件内部保存自己的状态，并不会从父组件接收任何 props。这种模式通常用于不需要父组件控制其值的组件，例如计时器或动画。

class App extends Component {
  state = {
    count: 0
  };

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ count: this.state.count + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

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

高阶组件

高阶组件是 React 中的一种函数，它可以接受一个组件作为参数，并返回一个新的组件。这种模式通常用于向现有组件添加新功能，例如数据获取、验证或样式。

const withData = (WrappedComponent) => {
  return class extends Component {
    state = {
      data: []
    };

    componentDidMount() {
      fetch('https://example.com/data')
        .then((res) => res.json())
        .then((data) => {
          this.setState({ data });
        });
    }

    render() {
      return <WrappedComponent data={this.state.data} />;
    }
  };
};

const App = withData((props) => {
  return (
    <div>
      {props.data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
});

渲染属性

渲染属性是 React 中的一种模式，它允许组件通过 props 将其渲染逻辑传递给子组件。这种模式通常用于创建可重用的组件，例如表单或列表。

const App = () => {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  return (
    <div>
      <ItemList items={items} renderItem={(item) => <p key={item.id}>{item.name}</p>} />
    </div>
  );
};

const ItemList = (props) => {
  return (
    <ul>
      {props.items.map(props.renderItem)}
    </ul>
  );
};

context

context 是 React 中的一种全局状态管理机制，它允许组件在不通过 props 传递数据的情况下访问共享数据。这种模式通常用于管理诸如用户身份验证、语言或主题等共享数据。

const App = () => {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <div>
        <UserProfile />
      </div>
    </UserContext.Provider>
  );
};

const UserProfile = () => {
  const user = useContext(UserContext);

  return (
    <div>
      <h1>{user.name}</h1>
    </div>
  );
};