React学习笔记

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值