react的知识点总结（1）

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

react中key值主要是用来识别组件的，key值相同时，在后期操作的时候，react在创建key值相同的组件时，遇到key值相同的，不会重新创建；
有了key值之后，key值与组件就会形成一种对应的关系，react会根据key值来绝对组件的创建销毁或者更新；
如果key值相同，组件的属性发生了变化，这时组件不会被销毁，只会对响应的属性进行更新；
如果key值不同，那么组件会先被销毁，之后再重新创建；

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

1）react通过操纵虚拟DOM，不进行节点操作，最大限度的减少与真实DOM的交互，这样可以提高性能；
2）shouldComponentUpdate，在这个生命周期内，我们可以进行新旧两个state和props的对比，如果数据没有发生变化，这个函数就会返回false，这样后面的生命周期就不会执行，render函数也不会重新渲染，这样也可以提升性能；
3）immutable，immutable的特点就是不可修改，改变它的任何数据时，都会重新生成一个新的对象，修改只会在新生成的对象上修改，原数据不会发生改变，这样就可以避免把所有节点都复制一遍，降低性能损耗；immutable的实现原理就是数据结构共享；

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

1）通过this.setState来修改state中的数据；
2）this.setState是异步的；
3）其中有两个参数，第一个参数是一个对象或者是一个函数（必须返回一个对象），
函数中的第一个值为（prevState），第二个参数是（prevProps）
例：

<br>this.setState((prevState,prevProps)=>({ }))

4）为什么是异步的，一位state可以批量执行，也就是说当多个setState一起同时执行时会被合并，提高DOM的渲染效率；
5）this.setState什么时候是同步的？原生js绑定的事件，setTimeout/setInterval等，（就是不受react机制控制时）
6）this.setState本身其实是一个同步的，异步不是因为本身的运行机制或者代码，而是因为他所在的合成事件和钩子函数的调用顺序在更新之前，导致函数内没法立即拿到更新后的值，形成了所谓的异步，可以通过第二个参数中的callback拿到更新后的结果；

render函数什么时候会执行？

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

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

shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

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

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

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

constructor、componentWillMount、render、componentDidMount

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

constructor、componentwillMount、componentDidMount、componentWillUnmount

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

render、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate

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

componentWillRecevieProps、shouldcomponentUpdate、componentWillUpdate、render、componentDidUpdate

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

componentWillMount、constructor、componentWillMount、render、componentDidMount

react中如何创建一个组件？

1）class 组件名称 extends Component{ }；
2）var App=React.createClass（{ }）；

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

自定义属性：
组件名称.defaultProps={
key:val,
}
限制外部数据类型：引入第三方依赖propsTypes；
组件名称.propsTypes={
key:propsTypes.类型
}

react中常用的路由配置项？

BrowserRouter 路由根组件，路径不带#号history路由
HashRouter 路由根组件，路径带#号hash路由
withRouter 对非路由渲染的组件组件进行包裹，让其具备三个属性
Route 定义路由
Link 路由跳转，没有动态属性，使用场景，非tabBar
NavLink 路由跳转，有动态属性，使用场景，tabBar
Switch 路由渲染，被其包裹的组件只会被渲染一个，包裹时最好将子组件 放在这个标签之外，父组件放在内部
Redirect 路由重定向

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

1）component：使用component渲染的路由组件会有三个自带的属性，localtion、history、match，他的缺点是不可以进行传参，不可以渲染非组件标签；
2）render：使用render渲染的路由组件可以进行路由传参，可以渲染非组件标签，但是不具备三个属性，如果需要使用的话，需要传参传递进来；

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

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

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

动态路由：
定义路由时：采用/😕:这种形式；
路由跳转时：路径+key形式；
接收：this.props.match.params；
query传值：
定义路由时：与正常时相同；
路由跳转时：使用字符串拼接；
接收：this.props.location.search
对象传值：
定义路由时：与正常时相同；
路由跳转时：使用对象，内部包含定义路径的对象和传递参数的对象；
接收：this.props.history.query
编程式导航：
this.props.history.push({路径部分}，{参数部分})
注意：使用对象传值以及编程式导航传值时如果页面刷新，那么传递的值就会消失；

为什么要使用虚拟DOM？(什么是 Virtual DOM？)

虚拟DOM
那就是虚拟DOM概念出现的地方，并且其性能要比真实DOM好得多。虚拟DOM只是DOM的虚拟表示。每当我们的应用程序状态更改时，虚拟DOM就会更新，而不是真实DOM。
React如何使用虚拟DOM
在React中，每个UI块都是一个组件，每个组件都有一个状态。React遵循可观察的模式，并监听状态变化。当组件的状态改变时，React更新虚拟DOM树。虚拟DOM更新后，React然后将虚拟DOM的当前版本与虚拟DOM的先前版本进行比较。此过程称为“差异化”。
一旦React知道哪些虚拟DOM对象已更改，然后React就会在真实DOM中仅更新那些对象。与直接操作真实DOM相比，这使性能好得多。
原因：对于局部的小视图的更新，重新构造整棵 DOM没问题；但是对于大型视图，如全局应用状态变更的时候，需要更新页面较多局部视图的时候，这样的做法不可取。 Virtual DOM只是加了一些特别的步骤来避免了整棵 DOM 树变更。
总结来说就是：
频繁的DOM操作昂贵且性能沉重。
虚拟DOM是真实DOM的虚拟表示。
React使用虚拟DOM来增强其性能。
JS 和 DOM 之间的缓存