react-常见面试题

1、React中的key值的作用是什么？

react中key值主要是用来识别组件的，key值相同时，在后期操作的时候，react在创建key值相同的组件时，遇到key值相同的，不会重新创建；

有了key值之后，key值与组件就会形成一种对应的关系，react会根据key值来绝对组件的创建销毁或者更新；

如果key值相同，组件的属性发生了变化，这时组件不会被销毁，只会对响应的属性进行更新；

如果key值不同，那么组件会先被销毁，之后再重新创建；

2、react中的性能优化有哪些方式？

1）react通过操纵虚拟DOM，不进行节点操作，最大限度的减少与真实DOM的交互，这样可以提高性能；

2）shouldComponentUpdate，在这个生命周期内，我们可以进行新旧两个state和props的对比，如果数据没有发生变化，这个函数就会返回false，这样后面的生命周期就不会执行，render函数也不会重新渲染，这样也可以提升性能；

3）immutable，immutable的特点就是不可修改，改变它的任何数据时，都会重新生成一个新的对象，修改只会在新生成的对象上修改，原数据不会发生改变，这样就可以避免把所有节点都复制一遍，降低性能损耗；immutable的实现原理就是数据结构共享；

3、react中如何修改state中的数据？this.setState是同步的还是异步的？this.setState中的第二个参数的作用是什么？为什么是异步的？

1）通过this.setState来修改state中的数据；

2）this.setState是异步的；

3）其中有两个参数，第一个参数是一个对象或者是一个函数（必须返回一个对象），

函数中的第一个值为（prevState），第二个参数是（prevProps）

例：
this.setState((prevState,prevProps)=>({ }))

4）为什么是异步的，一位state可以批量执行，也就是说当多个setState一起同时执行时会被合并，提高DOM的渲染效率；

5）this.setState什么时候是同步的？原生js绑定的事件，setTimeout/setInterval等，（就是不受react机制控制时）

6）this.setState本身其实是一个同步的，异步不是因为本身的运行机制或者代码，而是因为他所在的合成事件和钩子函数的调用顺序在更新之前，导致函数内没法立即拿到更新后的值，形成了所谓的异步，可以通过第二个参数中的callback拿到更新后的结果；

4、render函数什么时候会执行？

当this.setState发生变化时就会更新；

5、this.setState执行后会执行哪些生命周期函数？

shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

6、call、apply、bind三者之间的区别？

call和apply都是直接调用函数的；

bind每次调用执行的时候都会返回一个新的函数体，新的函数体内部的this指向才是我们需要改变指向的this；

7、组件第一次加载时执行的生命周期有哪些？

constructor、componentWillMount、render、componentDidMount

8、哪些生命周期会执行一次？

constructor、componentwillMount、componentDidMount、componentWillUnmount

9、哪些生命周期会执行多次？

render、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate

10、当this.props执行后会执行哪些生命周期？

componentWillRecevieProps、shouldcomponentUpdate、componentWillUpdate、render、componentDidUpdate

11、当组件的key值发生变化时会执行哪些生命周期？

componentWillMount、constructor、componentWillMount、render、componentDidMount

12、react中如何创建一个组件？

1）class 组件名称 extends Component{ }；

2）var App=React.createClass（{ }）；

13、react中如何定义自定义属性，以及限制外部数据的类型？

自定义属性：

组件名称.defaultProps={

key:val,

}

限制外部数据类型：引入第三方依赖propsTypes；

组件名称.propsTypes={

key:propsTypes.类型

}

14、react中常用的路由配置项？

BrowserRouter 路由根组件，路径不带#号history路由

HashRouter 路由根组件，路径带#号hash路由

withRouter 对非路由渲染的组件组件进行包裹，让其具备三个属性

Route 定义路由

Link 路由跳转，没有动态属性，使用场景，非tabBar

NavLink 路由跳转，有动态属性，使用场景，tabBar

Switch 路由渲染，被其包裹的组件只会被渲染一个，包裹时最好将子组件 放在这个标签之外，父组件放在内部

Redirect 路由重定向

15、reatc路由中Route渲染组件的方法有哪几种？区别是什么？

1）component：使用component渲染的路由组件会有三个自带的属性，localtion、history、match，他的缺点是不可以进行传参，不可以渲染非组件标签；

2）render：使用render渲染的路由组件可以进行路由传参，可以渲染非组件标签，但是不具备三个属性，如果需要使用的话，需要传参传递进来；

16、如何控制路由的路径完全匹配？

在NavLink或者Route标签中添加exact属性，是路径完全匹配

17、react中路由传递参数的方法有哪些？

动态路由：

定义路由时：采用/:/:这种形式；

路由跳转时：路径+key形式；

接收：this.props.match.params；

query传值：

定义路由时：与正常时相同；

路由跳转时：使用字符串拼接；

接收：this.props.location.search

对象传值：

定义路由时：与正常时相同；

路由跳转时：使用对象，内部包含定义路径的对象和传递参数的对象；

接收：this.props.history.query

编程式导航：

this.props.history.push({路径部分}，{参数部分})

注意：使用对象传值以及编程式导航传值时如果页面刷新，那么传递的值就会消失；