[Related topic recommendations:react interview questions(2021)]
Difficulty: ⭐
Virtual DOM (VDOM)It is a memory representation of the real DOM, a programming concept, and a pattern. It will be synchronized with the real DOM, such as through a library such as ReactDOM. This synchronization process is called reconciliation.
Virtual DOM is more of a pattern than a specific technology.
Source:https://github.com/sudheerj/reactjs-interview-questions
Reference:https://www.javascriptcn. com/read-65385.html
Difficulty: ⭐⭐
##Class components（Class components）
props.
.are passed from the outside world, and the statestateis the component itself. The state can be modified arbitrarily in the componentclass Welcome extends React.Component { render() { return ( Welcome { this.props.name }
); } } ReactDOM.render(
Functional component
object and returns a React elementfunction Welcome (props) { return Welcome {props.name}
} ReactDOM.render(
Difference
Function component Of course, there are differences between them and class components, and the performance of function components is higher than that of class components, because class components need to be instantiated when used, while function components can directly execute the function and return the result. To improve performance, try to use functional components.资料来源：https://github.com/Pau1fitz/react-interview
参考资料：https://overreacted.io/how-are-function-components-different-from-classes/
难度：⭐⭐
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：
class UnControlledForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return ( ) } }
上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。
另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值：
function CustomForm ({handleSubmit}) { let inputElement return ( ) }
资料来源：https://github.com/Pau1fitz/react-interview
参考资料：https://stackoverflow.com/questions/29503213/use-state-or-refs-in-react-js-form-components
难度：⭐⭐
为了解决跨浏览器兼容性问题，React中的事件处理程序将传递SyntheticEvent实例，该实例是React跨浏览器本机事件的跨浏览器包装器。这些综合事件具有与您惯用的本机事件相同的界面，除了它们在所有浏览器中的工作方式相同。
有点有趣的是，React实际上并未将事件附加到子节点本身。React将使用单个事件侦听器在顶层侦听所有事件。这对性能有好处，也意味着React在更新DOM时无需担心跟踪事件监听器。
资料来源：https://tylermcginnis.com/react-interview-questions/
参考资料：https://www.cnblogs.com/xiangming25/p/6430461.html
难度：⭐⭐
state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息，但它们在组件方面的功能不同。即
props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。资料来源：https://github.com/sudheerj/reactjs-interview-questions
参考资料：https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react
难度：⭐⭐
Refs是使用React.createRef()方法创建的，并通过ref属性添加到 React 元素上。为了在整个组件中使用refs，只需将ref分配给构造函数中的实例属性
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ; } }
和：
class UserForm extends Component { handleSubmit = () => { console.log("Input Value is: ", this.input.value) } render () { return ( ) } }
我们还可以借助闭包在功能组件中使用它。
资料来源：https://github.com/sudheerj/reactjs-interview-questions
参考资料：https://segmentfault.com/a/1190000015113359
难度：⭐⭐
高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。基本上，这是从React的组成性质派生的一种模式，我们称它们为“纯”组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
资料来源：https://github.com/sudheerj/reactjs-interview-questions
参考资料：https://css-tricks.com/what-are-higher-order-components-in-react/
难度：⭐⭐
在调用方法之前，子类构造函数无法使用this引用super()。
在ES6中，在子类的constructor中必须先调用super才能引用this。
在constructor中可以使用this.props
使用props：
class MyComponent extends React.Component { constructor(props) { super(props); console.log(this.props); // Prints { name: 'sudheer',age: 30 } } }
不使用props：
class MyComponent extends React.Component { constructor(props) { super(); console.log(this.props); // Prints undefined // But Props parameter is still available console.log(props); // Prints { name: 'sudheer',age: 30 } } render() { // No difference outside constructor console.log(this.props) // Prints { name: 'sudheer',age: 30 } } }
上面的代码片段揭示了this.props行为仅在构造函数中有所不同。外部构造函数相同。
资料来源：
https://github.com/sudheerj/reactjs-interview-questions
https://www.fullstack.cafe/React)
难度：⭐⭐⭐
在HTML当中，像,