受控组件和非受控组件的区别

受控组件

• 受控组件就是必须要控制它，实时监听
• 给input添加 value={note} 就变成受控组件
• 监听 value 的 onChange 事件，note 改变的时候就 setNote，控制了 input 的读写
• React的严格模式（<React.StrictMode>）会让 console.log(note)打出两遍，不影响

const NoteSection: React.FC = () => {
  const [note, setNote] = useState('');
  console.log(note)
  return (
    <Wrapper>
      <label>
        <span>备注</span>
        <input type="text" placeholder="在这里添加备注"
               value={note}
               onChange={(e)=> setNote(e.target.value)}
        />
      </label>
    </Wrapper>
  );
};

非受控组件

• 非受控组件：就不需要 value 和 onChange
• 使用 defaultValue，但 note 改变的状态无法获取
• 添加鼠标移出事件监听，通过ref属性来获取用户input的内容
• ref属性就是为了获取Dom节点：ref={refInput}；refInput.current.value
• 不进行实时监听，也就是在结束的时候获取到输入的值
• 和Vue的 v-model.lazy="value"很相似

const NoteSection: React.FC = () => {
  const [note, setNote] = useState('');
  const refInput = useRef<HTMLInputElement>(null);
  const onBlur = () => {
    if (refInput.current !== null) {
      setNote(refInput.current.value);
    }
  };
  return (
    <Wrapper>
      <label>
        <span>备注</span>
        <input type="text" placeholder="在这里添加备注"
               ref={refInput}
               defaultValue={note}
               onBlur={onBlur}
        />
      </label>
    </Wrapper>
  );
};

React onChange 和 HTML onChange 的区别

• HTML 中的 change 事件是在鼠标移走之后才会触发的事件
  但是早于 onBlur 的（鼠标移开事件）
• React 中的 change 事件是在输入一个字的时候就触发