6.20解惑

不不川
125 阅读5分钟

1.react渲染问题

虚拟dom就是将dom对比操作放在js层
虚拟dom的两个核心api： h函数用来生成虚拟dom 生成的是一个dom节点的js对象
还有path函数
h函数调用后会调用render函数
每个组件只有一个render函数
而React.render实际上就相当于是vdom里面的path函数，path函数接收两个参数。
path(container,vnode)和path(vnode,newVnode)的实现也是diff算法的一个实现过程，通过调用createElement和updateChildren方法让页面上的节点创建和更新。

书写JSX代码 => Babel编译JSX => 编译后的JSX执行React.createElement的调用 => 传入到ReactElement方法中生成虚拟Dom => 最终返回给ReactDom.render生成真实Dom】

所以React实现了一个Virtual DOM，组件的真实DOM结构和Virtual DOM之间有一个映射的关系，React在虚拟DOM上实现了一个diff算法，当render()去重新渲染组件的时候，diff会找到需要变更的DOM，然后再把修改更新到浏览器上面的真实DOM上，所以，React并不是渲染了整个DOM树，Virtual DOM就是JS数据结构，所以比原生的DOM快得多。

所以说render函数干了很多事：先对比然后再返回到真实dom树上

https://blog.csdn.net/qq_36407875/article/details/84965311

2.react脚手架文件

public 静态资源文件夹
    favicon.icon网站页签图标
    index.html主页面
    logo2.png logo图
    mainifest.json应用加壳的配置文件
    robots.txt爬虫协议文件
src源码文件
    App.css app组件的样式
    App.js app组件
    app.test.js 用于给app组件做测试
    index.css 样式
    index.js 入口文件
    logo.svg logo图
    reportWebVitals.js 页面性能分析文件（需要web-vitals库的支持）
    setupTests.js 组件单元测试的文件需要jest-dom库的支持

3.react生命周期

react.js是react核心库
react-dom.js是提供操作dom的react扩展库
babel.min.js解析jsx语法代码转为js代码的库

生命周期旧的阶段：
1.初始化阶段 由reactdom.render（）触发-初次渲染
constructor
componentwillmount
render
componentdidmount
更新阶段
由组件内部this.setState或父组件重新render触发
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
卸载组件 由reactdom.unmountComponentAtNode()
componentWillUnmount
react生命周期新阶段：
1.初始化阶段：由reactdom.render（）触发--初次渲染
constructor
getDrivedStateFromProps
render
componentDidMount
2.更新阶段 由组件内部this.setState或父组件重新render触发
getDerivedStateFromProps
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate
componentDidUpdate
3.卸载组件由reactdom.unmountComponentAtNode()
componentWillUnmount()
重要的钩子：
render初始化渲染或更新渲染时调用
componentDidMount开启监听，发送ajax请求
componentWillUnmount：做一些收尾工作比如清理定时器


getDerviedStateFromProps
getSnapshotBeforeUpdate

5.axios

相关api
   1.get请求
 axios.get('user?ID=12345')
   .then(function(response){
      console.log(response.data);
   })
   .catch(function(error){
      console.log(error);
   });
 axios.get('/user',{
   params:{
     ID:12345
    }
   })
   .then(function(response){
    console.log(response.data)
   })
   .catch(function(error){
     console.log(error);
   });
   2.post请求
   axios.post('/user',{
    firstName:'Fred',
    lastName:'Flintstone'
   })
   .then(function(response){
    console.log(response)
   })
   .catch(function(error){
     console.log(error)
   });

6.消息订阅-发布机制

  • 工具库：PubSubJS
import PubSub from 'pubsub-js'引入
PubSub.subscribe('delete'function(data){});订阅
Pubsub.publish('delete',data)发布信息

7.fetch

  • 原生函数，不再使用xmlhttprequest对象提交ajax请求
  • 老版本浏览器不支持可能
fetch的get请求
fetch(url).then(function(response){
  return response.json()
  }).then(function(data){
    console.log(data)
  }).catch(function(e){
    console.log(e)
  });
  2.post请求
  fetch(url,{
    method:'POST',
    body:JSON.stringify(data),
   }).then(function(data){
    console.log(data)
   }).catch(function(e){
    console.log(e)
   })

7.react路由

  1. 对spa的理解
  • 单页web应用 spa
  • 整个页面只有一个完整的页面
  • 点击页面中的链接不会刷新页面只会做页面的局部更新
  • 数据都需要通过ajax请求获取，并在前端异步展现
  1. 对路由的理解
 什么是路由：
   1.一个路由就是一个映射关系
   2.key为路径，value可能是function或component
 路由分类：
   1.后端路由
   value是function，用来处理客户端提交的请求
   注册路由：router.get(path,function(req,res))
   工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据
   2.前端路由
   浏览器端路由，value是component，用于展示页面内容
   注册路由：<Router path='/test' component={Test}>
   工作过程：当浏览器的path变为/test时当前路由组件就会变为Test组件
  所以我们会用到一个库 react-router-dom插件库，专门来实现一个spa应用
-   此库中相关api  内置组件有：<BrowserRouter> <HashRouter> <Route> <Redirect> <Link> <NavLink> <Switch> 还有history对象，match对象，withRouter函数

8.redux

  • redux是一个专门用于做状态管理的js库 但并不是react插件库
  • 可以用在react angular vue等项目中，但基本与react配合使用
  • 作用：集中式管理react应用中多个组件共享的状态
  1. 什么时候需要使用redux呢
  • 某个组件的状态需要让其他组件可以随时拿到（共享时）
  • 一个组件需要改变另一个组件的状态（通信）
  • 总体原则：能不用就不用，如果不用比较吃力才考虑使用
redux的三个核心概念
  1.action
  动作的对象
  包含两个属性：type标识属性，值为字符串，唯一，必要属性
               data数据属性，值类型任意，可选属性
   {type:'ADD_STUDENT',data:{name:'tom',age:18}}
  2.reducer
  用于初始化状态，加工状态
  加工时根据旧的state和action，产生新的state的纯函数
  3.store
  将state action reducer联系在一起的对象
  如何得到此对象：
     import {createStore} from 'redux'
     import reducer from './reducers'
     const store=createStore(reducer)
   此对象的功能：getState()得到state
                dispatch(action)分发action，触发reducer调用，产生新的state 
                subscribe(listener)注册监听，当产生新的state时自动调用。
   4.redux的核心api
   createstore()创建包含指定reducer的store对象
   store对象：redux库最核心的管理对象，内部维护着state reducer

还剩下一些知识待补充 高阶函数 纯函数 等等 redux知识

avatar
文章
阅读
粉丝