React基础面试题（二）

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

受控和非受控组件一般作用于表单类型的元素，例如 input，select，textarea等 html 元素

受控组件

表单元素的值变化需要通过 onChange 来手动 setState 值，表单才会相应变化

非受控组件

表单元素的值不受 React 控制，如果值设置的是 undefined 就可以随意输入，但是如果值是非 undefined ，则表单无法输入

Live Editor

function App() { // name是undefined，表单可以输入任意值 const [name, setName] = useState(); return <input value={name} />; }

function App() {
  // name是undefined，表单可以输入任意值
  const [name, setName] = useState();
  return <input value={name} />;
}

Result

Loading...

Live Editor

function App() { // name是不是undefined，用户无法输入 const [name, setName] = useState(""); return <input value={name} />; }

function App() {
  // name是不是undefined，用户无法输入
  const [name, setName] = useState("");
  return <input value={name} />;
}

Result

Loading...

建议使用受控组件，避免未知的问题产生

什么是合成事件

React 自身实现了一套事件处理机制，可以实现浏览器兼容，通过在根元素绑定监听事件，利用事件委托的原理。

如果需要获取原生事件对象，可以通过 nativeEvent 属性来获取。

合成事件与浏览器的原生事件不同，也不会直接映射到原生事件。例如，在 onMouseLeave 事件中 event.nativeEvent 将指向 mouseout 事件。

tip

React16 事件委托使用 document.addEventListener() 来实现，React17 则使用 rootNode.addEventListener() 来实现。

React16 的执行顺序如下

真实的button的dom事件
document上的事件
绑定在虚拟dom上的button事件

那么 React17 的执行顺序变成了这样

真实的button的dom事件
绑定在虚拟dom上的button事件
document上的事件