React介绍以及常用知识点

版权声明：如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。 如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。 愿大家都能在编程这条路，越走越远。 https://blog.csdn.net/weixin_44369568/article/details/91488960

React

1、虚拟Dom

1. 节约资源
2. 放在内存中
3. 会利用Dom diff 算法
4. 高效

2、react

• 核心库
• React 是一个用于构建用户界面的 JAVASCRIPT 库。
• React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
• React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
• React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
• React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

3、react特点

1. 声明式设计
2. 高效
3. 灵活
4. JSX
5. 组件
6. 单向响应的数据流

4、react-dom

• 做dom用的 跑在浏览器端
• 渲染/挂载

5、react-native

• native 上面有个 web-view
• 优点: 流畅
• 缺点: 麻烦

6、改变this指向

1. apply 数组时 // 立即执行
2. call // 立即执行
3. bind 返回值：函数(不会执行)

7、react事件

e.currentTarget：绑定事件的dom e.target：触发事件的dom //阻止事件默认行为 e.preventDefault(); //阻止事件冒泡 e.stopPropagation();

8、组件

1. 容器组件 // 有state(只能通过class来定义)
2. 视图组件 // 没有state(渲染出来的,可以通过class和函数来定义)

9、获取元素

• ref 获取dom(refer to缩写)
• findDomNode 获取dom的实例

10、按需加载

封装一个loading组件

import React from 'react'; import '../../scss/index.css'; export default ()=>{     return <div className='load'>         <img src="/load.gif"/>     </div> }

样式

.load{     width: 100%;     height: 100%;     background: rgba(0,0,0,.5);     position: fixed;     left:0;     top:0;     display: flex;     justify-content: center;     align-items: center;     z-index: 999; }

react.config.js

// 引入路由按需加载的依赖 import Loadable from 'react-loadable';  // 路由未加载完成时显示的load组件 import Loading from '../components/common/loading';  const Detail = Loadable({     loader:()=>import('../components/Detail'),     loading:Loading })  const Index = Loadable({     loader:()=>import('../components/Index'),     loading:Loading })  const Feilei = Loadable({     loader:()=>import('../components/include/Feilei'),     loading:Loading }) 

11、定位

// 点击的时候调用这个方法 location(){  // 定位         let script = document.createElement('script');         script.src = 'http://pv.sohu.com/cityjson?ie=utf-8';         document.body.appendChild(script);         script.onload = ()=>{             this.setState({                 city:window.returnCitySN.cname             })         }     }

12、Diff算法

React中Diff算法的实现

转载请标明出处:React介绍以及常用知识点

文章来源: https://blog.csdn.net/weixin_44369568/article/details/91488960