受控表单元素和非受控表单元素
在html中，表单中可以使用入input、select等类型的数据输入控件，这些控件会自己保持自己的状态，，并根据用户输入更新状态。
在react中，数据通常保存在组件的state中，并且通过对应的set方法设置。
通过React状态控制输入的表单元素是受控的。
相反，由组件自己管理自己的状态是非受控的。
受控的表单元素
下面的表单元素，自己维护了自己的状态，name的值，当点击提交的时候，会将数据提交给web服务器。
类似的，在react中，表单控件也会管理好自己的数据，你可以通过ref来收集数据，最后在需要使用数据（比如提交）的时候，从实例变量上获取到数据。
非受控可以在UI交互逻辑简单，在简单的表单数据收集提交的场景被应用。
class Form extends Component {
handleSubmitClick = () => {
const name = this._name.value;
// do something with `name`
};
render() {
return (
(this._name = input)} />
);
}
}接着，让他变成受控的。
首先需要在组件中声明一个状态，用于维护输入控件的当前值。
然后在输入元素上需要有一个属性（input元素对应的是value）用来接受他的当前值，以及一个回调函数（onchange）用来修改状态。
当用户在输入一个字符时，handleNameChange被调用，将输入元素的当前值设置到状态中，状态改变后，组件使用新的value值重新渲染。
因此，react状态中始终维护了表单的当前值。
受控的好处是：
- 能即时的收集到所有的表单状态
- 能自定义的处理输入校验
- 可以方便的将数据同步到UI上。
class Form extends Component {
constructor() {
super();
this.state = {
name: "",
};
}
handleNameChange = (event) => {
this.setState({ name: event.target.value });
};
render() {
return (
);
}
}受控组件和非受控组件
受控组件和非受控组件的区别
非受控组件是指组件状态封闭在组件内，不受外部环境的影响。
受控组件指可以接受外部环境传入的value值，改变组件内部状态的组件。
对于组件库的一些组件，比如Input组件，需要做到既支持受控模式，又支持非受控模式。
非受控组件
对于下面的例子，这个Input组件中只有内部有一个状态，没有任何属性接受外部的状态，它是一个非受控的组件。
import React, { useState } from "react";
export const Input: React.FC = () => {
const [value, setValue] = useState("");
return (
<>
{
const val = e.target.value;
setValue(val);
}}
>
当前值为: {value}
);
};
export default function App() {
return (
);
}支持受控模式和非受控模式
简单实现
接着，给组件添加一个value属性和onChange属性，让组件同时支持受控模式和非受控模式。
设计思路：
在Input组件中始终维护一个状态，无论是否处于受控模式，它都直接使用自己的状态。当它处于受控模式时，让内部的状态手动和外部状态保持一致。
import React, { useEffect, useState } from "react";
import { isUndefined } from "util";
interface CustomInputComProps {
value?: string;
onChange?: (value: string) => void;
}
export const Input: React.FC = (props) => {
const [value, setValue] = useState(props.value);
const isControlled = !isUndefined(props.value);
useEffect(() => {
// 如果是受控模式，让内部的状态和外部的状态保持一致
if (isControlled) {
setValue(props.value);
}
}, [props.value]);
return (
<>
{
const val = e.target.value;
// 如果是非受控模式，自己管理自己的状态
if (!isControlled) setValue(val);
props.onChange?.(val);
}}
>
当前值为: {value}
);
};
export default function App() {
const [name, setName] = useState("");
return (
{
setName(value);
}}
>
);
} 存在的问题：
- 由于通过setState更新子组件的状态，所以子组件状态的更新比父组件晚一个渲染周期。
- 受控模式下，内部状态在useEffect中通过setState来进行状态同步，因此会产生额外的一次渲染，一般来说多一次的渲染带来的性能问题可以忽略不计，但对于复杂的组件，还是可以继续优化。
改进1
解决方式：
- 对于子组件状态的更新比父组件晚一个渲染周期的问题：子组价和父组件的状态同步实际无需时刻一致，只需要判断，在组件处于受控模式下，直接使用来自外部的状态即可。
import React, { useEffect, useState } from "react";
import { isUndefined } from "util";
interface CustomInputComProps {
value?: string;
onChange?: (value: string) => void;
}
export const Input: React.FC = (props) => {
const [value, setValue] = useState(props.value);
const isControlled = !isUndefined(props.value);
useEffect(() => {
// 如果是受控模式，让内部的状态和外部的状态保持一致
if (isControlled) {
setValue(props.value); //
}
}, [props.value]);
const finalValue = isControlled ? props.value : value;
return (
<>
{
const val = e.target.value;
// 如果是非受控模式，自己管理自己的状态
if (!isControlled) setValue(val);
props.onChange?.(val);
}}
>
当前值为: {value}
);
};
export default function App() {
const [name, setName] = useState("");
return (
{
setName(value);
}}
>
);
} 改进1的抽象
import React, { useEffect, useState } from "react";
import { isUndefined } from "util";
import { useUpdateEffect } from "ahooks";
type Options = {
value?: T;
defaultValue?: T;
};
export function usePropsValue(
options: Options
): [T, React.Dispatch>] {
const isControlled = !isUndefined(options.value);
const [state, setState] = useState(
isControlled ? options.value : options.defaultValue
);
useUpdateEffect(() => {
// 外部value改变时
// 如果移除了value，则更新内部上
// 否则，不同步到内部状态上，（如果同步到内部状态上，会引起额外的更新）
if (options.value === undefined) {
setState(options.value);
}
}, [options.value]);
const finalValue = isControlled ? options.value : state;
return [finalValue, setState];
}
改进2
对于setState产生额外的更新问题，可以通过ref存数据+手动更新来处理。
import React, { useRef } from "react";
import { isUndefined } from "util";
import { useUpdate } from "ahooks";
type Options = {
value?: T;
defaultValue?: T;
};
export function usePropsValue(options: Options) {
const isControlled = !isUndefined(options.value);
const update = useUpdate();
const stateRef = useRef(isControlled ? options.value : options.defaultValue);
if (isControlled) {
// 受控模式下，同步外部状态到内部状态
stateRef.current = options.value;
}
const setState = (nextValue: T) => {
if (nextValue === stateRef.current) return; // 避免不必要的update
stateRef.current = nextValue;
update(); // 更新组件
};
return [stateRef.current, setState] as const;
}
import React, { useState } from "react";
import { isUndefined } from "util";
import { usePropsValue } from "./usePropsValue";
interface CustomInputComProps {
value?: string;
onChange?: (value: string) => void;
}
export const Input: React.FC = (props) => {
const isControlled = !isUndefined(props.value);
const [value, setValue] = usePropsValue(props);
return (
<>
{
const val = e.target.value;
// 如果是非受控模式，自己管理自己的状态
if (!isControlled) {
setValue(val);
}
props.onChange?.(val);
}}
>
当前值为: {value}
);
};
export default function App() {
const [name, setName] = useState("");
return (
{
console.log("onChange触发了", value);
setName(value);
}}
>
);
}
参考
Controlled and uncontrolled form inputs in React don't have to be complicated
React 系列十：受控组件和非受控组件
antd mobile 作者教你写 React 受控组件和非受控组件