react基础知识集锦4 --- 函数组件和类组件（部分）

一、什么是受控组件？什么是非受控组件？

受控组件和非受控组件是React中关于表单组件的两种不同的实现方式。

1. 受控组件（Controlled Components）： 受控组件是指由React控制并管理表单元素的值和状态的组件。在受控组件中，表单元素的值存储在组件的state中，并且只能通过setState来改变它们的值。每当用户输入变化时，都会触发onChange事件，从而更新组件的state值。通过这种方式，React始终保持对表单元素的状态的完全控制。在受控组件中，可以对用户输入进行验证、实时响应并进行处理。

示例代码：

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    };
  }

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

  handleSubmit = (event) => {
    event.preventDefault();
    // 处理表单提交逻辑
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

1. 非受控组件（Uncontrolled Components）： 非受控组件是指表单元素的值由DOM本身管理的组件。在非受控组件中，表单元素的值存储在DOM节点中，组件无法直接访问或控制它们。可以通过ref来获取表单元素的值，而不需要在state中保存它们。非受控组件通常用于简单的表单中，当表单数据的处理逻辑较为简单时使用。

示例代码：

class MyForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    const inputValue = this.inputRef.value;
    // 处理表单提交逻辑
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={ref => this.inputRef = ref} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

总结起来，受控组件通过React来管理表单元素的值和状态，而非受控组件则将这些任务交给了DOM本身。选择使用受控组件还是非受控组件取决于具体的需求和场景。通常情况下，受控组件更加灵活和可控，但也需要更多的代码和状态管理。而非受控组件相对简单，适用于简单的表单场景。

二、什么是纯组件?

纯组件（Pure Component）是React中一种优化性能的方式。纯组件是指在相同的输入下，始终渲染相同的输出，且不依赖于组件的状态或上下文。换句话说，如果纯组件的props没有改变，那么它们就会使用之前的缓存结果来避免重新渲染。

纯组件的主要特点包括：

1. 浅比较：纯组件通过对新旧props和state进行浅比较来检测它们是否发生了变化。如果新的props和state与之前的值相同，组件将不会重新渲染，而是复用之前的渲染结果。

2. 没有副作用：纯组件不会修改传入的props和state，也不会与外部世界进行交互。它们只根据输入的数据进行渲染，不会对其他部分产生影响。

使用纯组件的好处包括：

1. 性能优化：由于纯组件避免了不必要的渲染，可以减少组件的重复渲染次数，提高应用程序的性能。

2. 避免误操作：纯组件的特性可以帮助我们避免出现由于副作用造成的错误，因为它们只关注输入和渲染输出，而不会进行其他的操作。

使用纯组件的方式有两种：

1. 继承React.PureComponent：继承React.PureComponent类可以将一个组件声明为纯组件。React.PureComponent已经实现了对props的浅比较，所以可以自动进行性能优化。

2. 使用React.memo()高阶组件：React.memo()是一个高阶组件，用于包装函数组件，将其转化为纯组件。它接收一个组件并返回一个新的组件，该新组件在接收到相同的props时，将复用之前的渲染结果。

需要注意的是，纯组件适用于那些对于相同的输入应始终产生相同输出的场景。如果组件依赖于外部状态、随机数或时间等不稳定因素，并且它们的输出可能会改变，那么纯组件并不适合使用，否则会导致不可预期的结果。

三、多个组件有公共逻辑，怎么抽离？（封装组件）

下是一些常见的方法：

高阶组件（Higher-Order Component）：高阶组件是一个函数，接受一个组件作为参数，并返回一个新的增强过的组件。通过高阶组件，可以将公共逻辑抽离到独立的函数中，并将其应用于多个组件。高阶组件可以处理通用的状态管理、数据获取、事件处理等逻辑。

示例代码：

function withCommonLogic(WrappedComponent) {
  class WithCommonLogic extends React.Component {
    // 公共逻辑的实现

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return WithCommonLogic;
}

// 使用方式
const EnhancedComponent = withCommonLogic(MyComponent);

渲染属性（Render Props）：渲染属性是指通过一个函数作为组件的prop，该函数接收组件需要的数据和逻辑，并返回相应的JSX元素。通过传递不同的渲染属性函数，可以将公共逻辑注入到多个组件中。

示例代码：

class CommonLogicContainer extends React.Component {
  // 公共逻辑的实现

  render() {
    const { render } = this.props;
    return render(/*传递需要的数据和逻辑*/);
  }
}

// 使用方式
<CommonLogicContainer render={(data, logic) => <MyComponent data={data} logic={logic} />} />

 自定义Hooks：自定义Hooks是一种将公共逻辑封装为可复用的函数的方式。通过使用React的Hooks，可以将状态逻辑、副作用等抽离出来，并在组件中进行复用。

示例代码：

function useCommonLogic() {
  // 公共逻辑的实现

  return { /*返回需要的数据和逻辑*/ };
}

// 在组件中使用
function MyComponent() {
  const { data, logic } = useCommonLogic();

  // 组件逻辑和渲染
}

使用这些封装组件的方法，可以将多个组件中的公共逻辑抽离出来，提高代码的复用性和可维护性。具体使用哪种方法取决于你的需求和场景，选择适合的方式即可。