React进阶之旅：从受控组件到高阶函数和高级组件

前端

2023-11-29 15:59:45

进阶 React：掌握受控组件、高阶函数和高阶组件

前言

随着你对 React 的了解不断加深，你可能会迫切地想要超越基础，探索更多高级概念。本文将深入探讨 React 进阶之旅，从受控和非受控组件到高阶函数、高阶组件和它们的应用，助你成为一名更出色的 React 开发者。

受控组件 vs. 非受控组件

受控组件

受控组件的内部状态由父组件控制，这意味着父组件负责存储和更新组件状态，而组件本身只是负责渲染这些状态。

优点：

父组件拥有对组件行为的更大控制权。
可以强制输入特定值或限制更新情况。

非受控组件

非受控组件的内部状态由组件自身控制，意味着组件负责自己的状态管理，父组件无法直接访问这些状态。

优点：

组件更加独立。
减少父组件与组件之间的通信。

代码示例：

// 受控组件
const MyComponent = (props) => {
  return <input value={props.value} onChange={props.onChange} />;
};

// 非受控组件
const MyComponent = () => {
  const [value, setValue] = useState('');
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

高阶函数

高阶函数是一个函数，接受另一个函数作为参数，并返回一个新函数。

功能：

创建新函数或修改现有函数的行为。
提升代码可重用性，减少重复代码。

代码示例：

const double = (fn) => (x) => fn(x) * 2;
const addTwo = double((x) => x + 1);
console.log(addTwo(2)); // 6

高阶组件

高阶组件是一个函数，接受一个组件作为参数，并返回一个新组件。

功能：

扩展组件的功能。
修改组件的行为，无需直接修改组件本身。

代码示例：

const withTimer = (Component) => {
  return class extends React.Component {
    state = { time: 0 };
    componentDidMount() { ... }
    componentWillUnmount() { ... }
    render() { return <Component {...this.props} time={this.state.time} />; }
  };
};