问题1：什么是虚拟dom？
主题: react
难度: ?
虚拟 dom (vdom)是真实 dom 在内存中的表示。ui 的表示形式保存在内存中，并与实际的 dom 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。
问题2：类组件和函数组件之间的区别是啥？
主题: react
难度:
类组件可以使用其他特性，如状态 state 和生命周期钩子。当组件只是接收 props 渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。
函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。
区别函数组件类组件是否有 this没有有是否有生命周期没有有是否有状态 state没有有问题 3：react 中 refs 干嘛用的？
主题: react
难度:
refs 提供了一种访问在render方法中创建的 dom 节点或者 react 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 refs。
咱们可以在组件添加一个 ref 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 dom 元素或组件的挂载实例。
class uncontrolledform extends component { handlesubmit = () => { console.log("input value: ", this.input.value) } render () { return ( <form onsubmit={this.handlesubmit}> <input type='text' ref={(input) => this.input = input} /> <button type='submit'>submit</button> </form> ) }}请注意，input 元素有一个ref属性，它的值是一个函数。该函数接收输入的实际 dom 元素，然后将其放在实例上，这样就可以在 handlesubmit 函数内部访问它。
经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 js 中的闭包与函数组件一起使用。
function customform ({handlesubmit}) { let inputelement return ( <form onsubmit={() => handlesubmit(inputelement.value)}> <input type='text' ref={(input) => inputelement = input} /> <button type='submit'>submit</button> </form> )}问题 4：在 react 中如何处理事件
主题: react
难度:
为了解决跨浏览器的兼容性问题，syntheticevent 实例将被传递给你的事件处理函数，syntheticevent是 react 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 stoppropagation() 和 preventdefault()。
比较有趣的是，react 实际上并不将事件附加到子节点本身。react 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着 react 在更新 dom 时不需要跟踪事件监听器。
问题 5：state 和 props 区别是啥？
主题: react
难度:
props和state是普通的 js 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即
state 是组件自己管理数据，控制自己的状态，可变；props 是外部传入的数据参数，不可变；没有state的叫做无状态组件，有state的叫做有状态组件；多用 props，少用 state，也就是多写无状态组件。问题 6：如何创建 refs
主题: react
难度:
refs 是使用 react.createref() 创建的，并通过 ref 属性附加到 react 元素。在构造组件时，通常将 refs 分配给实例属性，以便可以在整个组件中引用它们。
class mycomponent extends react.component { constructor(props) { super(props); this.myref = react.createref(); } render() { return <p ref={this.myref} />; }}或者这样用：
class userform extends component { handlesubmit = () => { console.log("input value is: ", this.input.value) } render () { return ( <form onsubmit={this.handlesubmit}> <input type='text' ref={(input) => this.input = input} /> // access dom input in handle submit <button type='submit'>submit</button> </form> ) }}问题 7：什么是高阶组件？
主题: react
难度:
高阶组件(hoc)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 react 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。
const enhancedcomponent = higherordercomponent(wrappedcomponent);hoc 可以用于以下许多用例
代码重用、逻辑和引导抽象渲染劫持state 抽象和操作props 处理问题 8：在构造函数调用 super 并将 props 作为参数传入的作用是啥？
主题: react
难度:
在调用 super() 方法之前，子类构造函数无法使用this引用，es6 子类也是如此。将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props。
传递 props
class mycomponent extends react.component { constructor(props) { super(props); console.log(this.props); // { name: 'sudheer',age: 30 } }}没传递 props
class mycomponent extends react.component { constructor(props) { super(); console.log(this.props); // undefined // 但是 props 参数仍然可用 console.log(props); // prints { name: 'sudheer',age: 30 } } render() { // 构造函数外部不受影响 console.log(this.props) // { name: 'sudheer',age: 30 } }}上面示例揭示了一点。props 的行为只有在构造函数中是不同的，在构造函数之外也是一样的。
问题 9：什么是控制组件？
主题: react
难度: ?
在 html 中，表单元素如 <input>、<textarea>和<select>通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。
而 react 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如onchange)触发时重新渲染组件，因