react面试题

什么是虚拟DOM？
虚拟DOM(VDOM)是真实DOM在内存中的表示。UI的表示形式保存在内存中，并与实际的DOM同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。
类组件和函数组件之间的区别是啥？

• 类组件可以使用其他特性，如状态state和生命周期钩子。
• 当组件只是接收props渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。
  函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。
  
  React中refs干嘛用的？
  Refs提供了一种访问在render方法中创建的DOM节点或者React元素的方法。在典型的数据流中，props是父子组件交互的唯一方式，想要修改子组件，需要使用新的props重新渲染它。凡事有例外，某些情况下咱们需要咋典型数据流外，强制修改子代，这个时候可以使用Refs。
  咱们可以再组件添加一个ref属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层DOM元素或组件的挂载实例。

class UnControlledForm extends Component{
	handleSubmit = () =>{
		console.log("Input Value:",this.inputt.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 CustomeForm({handleSubmit}){
	let inputElement；
	return （
		<form onSubmit={()=>handleSubmit(inputElement.value)}>
			<input
			type='text'
			ref={(input)=>inputElement=input}/>
			<button type='submit'>Submit</button>
		</form>
	）
}

在React中如何处理事件
为了解决夸浏览器的兼容性问题，SyntheticEvent实例将被传递给你的事件处理函数，SyntheticEvent是React跨浏览器的浏览器原生事件包装器，他还拥有和浏览器原生事件相同的接口，包括stopPropagation()和preventDefault().
比较有趣的是，React实际上并不将事件附加到子节点本身。React使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着React在更新DOM时不需要跟踪事件监听器。
state和props区别是啥？
props和states是普通的js对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即

• state是组件自己管理数据，控制自己的状态，可变；
• props是外部传入的数据参数，不可变；
• 没有states的叫做无状态组件，有state的叫做有状态组件；
• 多用props，少用state，也就是多写无状态组件
  如何创建refs
  Refs是使用React.createRef() 创建的，并通过ref属性附加到React元素。在构造组件时，通常将Refs分配给实例属性，以便可以再整个组件中引用他们。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div 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>
    )
  }
}

什么是高阶组件
高阶组件（HOC）是接受一个组件并返回一个新组建的函数。基本上，这是一个模式，是从React的组合特性中衍生出来的，称其为出组件，因为他们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC可以用于以下许多案例

• 代码重用、逻辑和引导抽象
• 渲染劫持
• state抽象和操作
• props处理
  在构造函数调用super并将props作为参数传入的作用是啥？
  在调用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的行为只有在构造函数中是不同的，在构造函数之外也是一样的。
什么是控制组件
在HTML中，表单元素如< input >、< textarea >和< select >通常维护自己的状态，并根据用户输入进行更新。当用户提交表单时，来自上述元素的值将随表单一起发送。
而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如onChange)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。
如何 React.createElement ？
问题

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
)

上述代码如何使用 React.createElement 来实现:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

讲讲什么是 JSX ？
当 Facebook 第一次发布 React 时，他们还引入了一种新的 JS 方言 JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。

class MyComponent extends React.Component {
  render() {
    let props = this.props;  
    return (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}

为什么不直接更新 state 呢 ?
如果试图直接更新 state ，则不会重新渲染组件。

//错误
This.state.message = 'Hello world';

需要使用setState()方法来更新 state。它调度对组件state对象的更新。当state改变时，组件通过重新渲染来响应：

//正确做法
This.setState({message: ‘Hello World’});

React 组件生命周期有哪些不同阶段？
在组件生命周期中有四个不同的阶段：

1. Initialization：在这个阶段，组件准备设置初始化状态和默认属性。
2. Mounting：react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括componentWillMount和componentDidMount生命周期方法。
3. Updating：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括shouldComponentUpdate、componentWillUpdate和componentDidUpdate生命周期方法
4. Unmounting：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 componentWillUnmount 生命周期方法
   除以上四个常用生命周期外，还有一个错误处理的阶段：
   Error Handling：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了 componentDidCatch 生命周期方法。