React的特点
声明式开发:减少大量的DOM操作
可以与其他框架并存
组件化
单向数据流
视图层框架
函数式编程
Prop,state和Render函数的关系
1.当组件的prop和state发生改变时,组件的render函数会重新执行
2.当父组件的render函数执行时,子组件的render函数也会重新执行
React虚拟Dom
1.数据加模板生成虚拟dom
2.根据虚拟dom的结构生成真实的dom来显示
3.state发生变化,数据加模版生成新的虚拟dom
4对比新的虚拟dom和旧的虚拟dom的区别,找到其中的变化
5,直接操作dom,改变虚拟dom中变化节点对应的真实dom节点
虚拟dom为什么能够优化性能?
1.减少了dom操作,减少了真实dom的创建和对比,而是对比虚拟dom(js对象)
虚拟dom提升了性能,并且使得跨端应用得以实现,React native
React中setState为什么是一个异步函数?
答:当两个或者多个setState操作间隔的时间很短时,这时候所有的setState函数完成以后才会去生成新的虚拟dom,只需要进行一次虚拟dom对比,减少了性能开销。
setState函数第二个参数表示setState函数执行完成后要执行的函数
虚拟dom对比的diff算法
虚拟dom进行对比仅仅在同层级之间进行比较,如果相同,比较继续,如果不同,直接将整个节点替换为新的节点,而不会进一步比较节点下的各节点
for循环引入key值是为了优化diff算法比较时的性能,并且key值应该保持稳定,尽量不要使用index值做key值,因为index值不稳定
React的生命周期函数
概念:生命周期函数就是某一时刻,自动调用执行的函数
componentWillMount
在组件即将被挂载到页面的时刻自动执行
componentDidMount
组件挂载到页面之后立刻执行
只执行一次,常用于发送ajax请求
//yarn add axios
import axios from axios
componentDidMount(){
axios.get(/api/xxx).then(
()=>{
console.log(succ)
}
).catch(()=>{
console.log(failed)
})
}
shouldComponentUpdate
在组件更新之前自动调用执行
//在子组件中,有条件的渲染,减少不必要的渲染,性能优化
shouldComponentUpdate(nextProps,nextState){
if(nextProps.content!==this.props.content){
return true}
return false
}
componentWillUpdate
在组件更新之前执行,并且在shouldComponentUpdate之后执行
如果shouldComponentUpdate返回true,componentWillUpdate才会执行,返回false,则不会执行
componentDidUpdate
组件更新完成之后,componentDidUpdate会被执行
componentWillReceiveProps
一个组件要从父组件接收参数
当父组件的render函数执行的时候,这个生命周期函数才会被执行
如果这个组件第一次存在于父组件中,不会被执行
如果这个组件之前已经存在于父组件中,才会执行
componentWillUnmount
在组件将要移除之前,该生命周期函数会自动执行
Charles
charles用来抓取本地浏览器发送的请求,并且可以通过Charles来设置请求返回的数据
Redux
Redux是与React结合使用的数据层框架
他将数据统一存储到store中进行管理
Redux=Reducer+Flux