react高频面试题

1 什么是react

• react是由Facebook开源，主要用于构建用户界面的Javascript库，使用组件化的思想完成构建用户界面，它本身没有提供很多的API，所以都是依靠组件及组件的组合完成用户的界面的开发

2 React主要特点是什么

• 函数式编程 组件化开发 单向数据流 虚拟DOM 使用jsx语法构建模板 合成事件

3 什么是JSX

• jsx是js的一个语法扩展，是 一种语法糖的写法在react中用来构建组件的dom结构，最终会编译成react.createElement()函数的调用，最终返回的是一个js对象称为虚拟dom

3 react中的元素

• 元素分为组件元素和dom元素 在react中的最小单位就是元素

4 如何在React中创建组件？

在React中创建组件主要分为两种方式

• 函数方式：一个普通函数接收一个props，返回一个react元素，函数创建的组件没有生命周期，没有state状态，但是在react新版本中可以使用
  react提供hooks方式模拟state 生命周期 函数方式创建组件也是react官方比较提倡的组件创建方式

• class类方式：必须要有render这个方法返回一个react元素，使用class创建的组件可以包含，state状态，以及生命周期

5 什么是 pure Components ?

• pure Components 和 component 类一样，都是创建class组件的时候用来被继承的组件基类，唯一的区别就在于pure Components默认优化了shouldcomponentUpdate生命周期在其内部做了浅对比的优化，避免组件重复多次渲染

6 React状态是什么

• 状态指的是react中的state，组件中的state是组件私有的，其他组件要使用需要通过组件通讯的方式进行传递，但是不允许被其他组件改变，改变只能是当前组件中使用setState进行改变，这是用为react遵循的是单向数据流的概念

7 React 中的props是什么？

• 属性值是props，由父组件在当前组件元素上以属性的方式进行传递，在组件内部通过props接收，在组件内部props只能使用不能改变

8 HTML 和 React 事件处理有什么区别？

• react事件处理模仿html的dom 0
  级事件绑定方式实现，但是在react中的事件处理是，基于浏览器原生事件的跨浏览器包装，解决了不同浏览器绑定事件的兼容，并且采用了事件代理的形式优化了事件的绑定，在就是原生的事件处理程序中事件处理函数中的this指的是绑定事件的dom，而react中合成事件的this指的是window，一般情况下我们都需要手动当定this为当前组件实例（箭头函数触发，Constructor中bind重新绑定，
  class中直接声明箭头函数）

9 什么是 “key” 属性，在react中使用它有什么好处?

• key是一个特殊属性，用来给同级元素提供唯一标示，react在做diff的时候就不需要一一遍历，而是直接通过key就能找到对应的元素进行对比，所以key是react中默认的算法优化策略，而key的值我们一般使用唯一id，而不要使用index作为key的值，因为key的值如果是index的话涉及到元素的增删改查index就会发生改变，那么就会影响其他的元素

10 refs 有什么用?

• 用来获取ref引用的元素，可以使用React.createRef() 方法创建ref，并通过 ref 属性添加到 React
  元素上，也可以使用 ref 回调函数的方案

11 什么是 Virtual DOM（虚拟dom）?

• 虚拟dom就是一个js对象，用来以对象的形式描述真实的dom结构，虚拟dom的出现优化了以前对于真实dom操作过于频繁导致的性能问题，因为dom操作性能昂贵，每次dom的操作都会造成（重绘，回流），影响页面性能，而虚拟dom就是吧以前dom操作变成了js对象的操作，多个dom的修改变成多次对象的修改，一次dom渲染

12 什么是受控组件，什么是非受控组件?

• 受控组件主要是针对对于表单元素用来实现数据双向绑定的一种方法，给input元素的value绑定为组件的状态，并且通过onChange事件监听表单元素的改变，同步到state上，非受控组件就不操作value了，从改变成保存元素的dom引用，通过ref引用，直接操作dom

13 createElement 和 cloneElement 有什么区别?

• createElement用来创建react元素，而cloneElement是接受一个react元素，并且可以给这个元素添加新属性

栗子
【
React.createElement({
type: ‘div’,
children: [‘asdasd’]
})

React.cloneElement(<div>, {
		  aa: 'aaa',
		  key: 1
  })
】

14 在 React 中的提升状态是什么?

• 状态提升就是将当前组件的状态，向上定义到父组件或者其他祖先组件，从而让其他组件也能访问

15 什么是高阶组件

• 高级组件并不是react提供的api，而是借用函数式编程中高级函数的概念，进行组件逻辑的通用抽离，一般情况下高阶组件有两种用法（属性代理，反向继承），属性代理说的就是将一些公共的属性封装到高阶组件中贡其他组件使用，react内部也提供了一些属性代理的高级组件（connect，
  withRouter），反向代理可以实现将组件中一些公共方法抽离，以及可以利用反向代理操作组件的生命周期

16 什么是上下文（Context）?

• context是组件通讯的一种方法，用来实现跨组件通讯，而react-redux就是利用context来实现的state传递，两个版本

// 创建一个 theme Context, 默认 theme 的值为 light
const ThemeContext = React.createContext(‘light’);

function ThemedButton(props) {
// ThemedButton 组件从 context 接收 theme
return (
<ThemeContext.Consumer>
{theme => <Button {…props} theme={theme} />}
</ThemeContext.Consumer>
);
}

// 中间组件
function Toolbar(props) {
return (

);
}

class App extends React.Component {
render() {
return (
<ThemeContext.Provider value=“dark”>

</ThemeContext.Provider>
);
}
}

17 在 React 中什么是 Portal ?

• Portal 手动将组件渲染到某个位置。
• ReactDOM.createPortal(child, container)

18 初始化的数据请求应该在什么位置请求

• componentDidMount, 建议避免在 componentWillMount() 生命周期方法中执行异步初始化。在
  mounting 发生之前会立即调用 componentWillMount()，且它在 render()
  之前被调用，因此在此方法中更新状态将不会触发重新渲染。应避免在此方法中引入任何副作用或订阅操作。我们需要确保对组件初始化的异步调用发生在
  componentDidMount() 中，而不是在 componentWillMount() 中。