前端

在React中，**受控组件(Controlled Components)**和**非受控组件(Uncontrolled Components)**都是处理表单输入的方式，但它们处理数据的方式不同。

### 受控组件(Controlled Components)

受控组件是React的一种模式，在这种模式下，表单数据是由React组件的状态管理的。这意味着每次字段的值发生变化时，我们都会通过一个事件处理函数（通常是 `onChange`）来更新组件的状态。然后，组件的状态被用作输入字段的值，确保组件的状态是数据的唯一来源。

**示例：**
假设我们有一个受控的 `<input>`元素：

```jsx
class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }

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

  render() {
    return (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
      </form>
    );
  }
}
```

在上面的例子中，`<input>`的值始终由 `this.state.value`决定，而且每当用户输入时，`handleChange`函数都会被调用，更新状态，因此界面显示的内容总是和状态同步。

### 非受控组件(Uncontrolled Components)

非受控组件是另一种模式，在这种模式下，表单数据是由DOM本身处理的，而不是由React状态管理。这就像传统的HTML表单工作方式。在非受控组件中，我们通常使用 `ref`来从DOM节点获取表单数据，而不是为每个状态变化编写事件处理函数。

**示例：**
下面是一个非受控组件的例子：

```jsx
class UncontrolledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.inputRef.current.value);
    event.preventDefault();
  }

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

在上面的例子中，`<input>`不是通过状态来控制其值，而是通过 `ref`来访问DOM节点获取其值。  

### 总结

- 受控组件允许你更好地控制表单的行为，因为组件的状态充当了数据的真实来源。
- 非受控组件舍弃了对表单状态的即时控制，使得组件的代码更简洁，但可能会更难管理表单的状态，尤其是在复杂的表单交互时。

在实际的开发实践中，受控组件通常是首选方法，因为它们更加符合React的数据流概念，使得状态的管理更加清晰和可预测。然而，对于一些简单的表单或者集成第三方DOM库时，非受控组件也可能是一个不错的选择。


`React` 的 `setState` 方法通常被视为异步的，这是因为 `React` 可以批量延迟更新来优化性能。当你调用 `setState` 时，`React` 会将传递的对象或函数排入更新队列，而不是立即更新组件状态。之后，`React` 将在其生命周期方法中以批处理的方式来决定何时实际更新状态和重新渲染组件。

这种行为通常在事件处理、生命周期方法或任何由 React 控制的异步代码中表现得最为明显。例如：

```jsx
handleClick = () => {
  this.setState({ count: this.state.count + 1 });
  console.log(this.state.count); // 这里可能不会立即反映更新后的状态
  // ...其他逻辑
}
```

在上述代码中，`console.log` 执行时可能会打印出更新前的状态值，因为 `setState` 的调用并没有立即更新 `this.state`。

然而，当 `setState` 被用在某些异步的上下文中，比如 setTimeout 或者原生事件处理时，它的表现就可能是“同步”的，因为 React 的批处理机制没有在这些场景中介入：

```jsx
setTimeout(() => {
  this.setState({ count: this.state.count + 1 });
  console.log(this.state.count); // 这里将会立即反映更新后的状态
}, 0);
```

这里因为 `setTimeout` 跳出了 React 的控制，所以更新不再是批处理的，`setState` 将会同步地更新状态并重新渲染组件。

为了以一种可预测的方式处理 `setState` 可能的异步行为，最佳实践是使用它的回调函数：

```jsx
this.setState((prevState) => {
  return { count: prevState.count + 1 };
}, () => {
  console.log(this.state.count); // 这里将会在状态更新后执行
});
```

使用回调函数作为 `setState` 的第二个参数，可以确保在状态更新和组件重渲染之后执行特定的逻辑。这也解释了为什么在很多场合我们需要考虑到 `setState` 的异步特性。

React setState 执行过程是同步的还是异步的？

在React中，`useRef`是一个非常有用的Hook，它主要被用来访问DOM元素和保存跨渲染周期持久的可变数据。`useRef`返回一个可变的ref对象，其 `.current`属性被初始化为传递给 `useRef`的参数（initialValue）。返回的对象在组件的整个生命周期内保持不变。  

### 使用方式

首先，我们需要在组件内部导入 `useRef`：

```jsx
import React, { useRef } from 'react';
```

然后可以使用 `useRef`来创建一个ref对象：

```jsx
const myRef = useRef(initialValue);
```

其中 `initialValue`是ref对象 `.current`属性的初始值。使用 `myRef.current`可以访问或者修改这个值。

### 使用场景

有几种常见的场景适合使用 `useRef`：

#### 1. 访问DOM元素

当你需要直接操作DOM节点时，比如获取输入框的值或者设置焦点，可以使用 `useRef`。

```jsx
function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // 直接访问DOM元素来设置焦点
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Set focus</button>
    </>
  );
}
```

#### 2. 保存任意可变值

另一个使用场景是当你想要保存一个在组件的整个生命周期中都保持不变的值，这个值不会触发组件的重新渲染。

```jsx
function Timer() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // 执行一些操作
    }, 1000);
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  // ...

}
```

在这个例子中，`intervalRef`被用来保存一个间隔定时器的ID，虽然这个ID会在不同的渲染周期间发生变化，但我们不希望这种变化触发组件的重新渲染。

#### 3. 跟踪上一个值

`useRef`也可以被用来跟踪组件中的变量或状态的旧值。

```jsx
function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current; // 在渲染时获取旧的值

  // ...
}
```

这里 `prevCountRef`用于存储每次渲染后的 `count`值，可以在任何时候访问前一个状态的值，而不会触发组件的重新渲染。


React 中 useRef 的使用方式和使用场景有哪些？

React 中的 `useContext` 钩子是一个用于让组件能够访问 React 上下文（Context）的工具。这个上下文设计用于共享那些对于一个组件树而言是“全局”的数据，如当前认证的用户、主题或首选语言等。 

### 使用方式：

首先，你需要创建一个 Context 对象。这可以通过 `React.createContext()` 完成，并且通常会在组件树的较高层级上完成。

```javascript
import React from 'react';

// 创建 Context 对象
const MyContext = React.createContext(defaultValue);
```

一旦你有了一个 Context 对象，就可以使用 `Context.Provider` 组件包裹你的组件树的一部分，以在其下所有的组件中提供上下文数据。

```javascript
<MyContext.Provider value={/* 某些值 */}>
  {/* 组件树 */}
</MyContext.Provider>
```

然后，在组件树中的任何层级上，你都可以使用 `useContext` 钩子来访问该上下文。

```javascript
import React, { useContext } from 'react';

function MyComponent() {
  // 使用 useContext 钩子获取上下文值
  const contextValue = useContext(MyContext);
  return <div>{/* 使用 contextValue 做些什么 */}</div>;
}
```

通过使用 `useContext` 钩子，你不需要通过组件的 `props` 手动传递数据，可以直接访问上层组件通过 `Context.Provider` 提供的数据。

### 使用场景：

1. **主题切换**：当你想要在应用程序中切换主题时，你可以使用上下文来保持当前主题的状态，并在整个应用程序中轻松访问它。
2. **用户认证**：在需要知道当前用户是否已经登录的多个组件中，你可以使用上下文来共享用户的登录状态和用户信息。
3. **国际化**：你可以使用上下文来存储当前的语言设置，并在组件树中的任何地方访问它，以便于国际化。
4. **状态管理**：在某些简单的情况下，你可以使用上下文来代替其他状态管理库（如 Redux），来存储和管理全局状态。

### 示例：

假设我们有一个需要在多个组件之间共享的用户认证状态，可以这样使用 `useContext`：

```javascript
// AuthContext.js
import React, { createContext, useState } from 'react';

// 创建上下文对象，初始值为 null
export const AuthContext = createContext(null);

// 创建一个提供者组件
export const AuthProvider = ({ children }) => {
  const [authUser, setAuthUser] = useState(null);

  // 登录逻辑
  const signIn = (username, password) => {
    // 假设验证逻辑在这里
    const user = { name: 'Mock User', username };
    setAuthUser(user);
  };

  // 登出逻辑
  const signOut = () => {
    setAuthUser(null);
  };

  return (
    <AuthContext.Provider value={{ authUser, signIn, signOut }}>
      {children}
    </AuthContext.Provider>
  );
};

// App.js
import React from 'react';
import { AuthProvider } from './AuthContext';
import MyComponent from './MyComponent';

function App() {
  return (
    <AuthProvider>
      <MyComponent />
    </AuthProvider>
  );
}

// MyComponent.js
import React, { useContext } from 'react';
import { AuthContext } from './AuthContext';

function MyComponent() {
  const { authUser, signIn, signOut } = useContext(AuthContext);

  return (
    <div>
      {authUser ? (
        <div>
          <p>Welcome, {authUser.name}!</p>
          <button onClick={signOut}>Sign out</button>
        </div>
      ) : (
        <button onClick={() => signIn('user', 'password')}>
          Sign in
        </button>
      )}
    </div>
  );
}
```


什么是 React 的受控组件和非受控组件?

受控组件(Controlled Components)

非受控组件(Uncontrolled Components)

总结