React
1、虚拟DOM
- 节约资源
- 放在内存中
- 会利用DOM diff算法
- 高效
2、起源
React是一个用于构建用户界面的JavaScript库。主要用于构建UI,起源于Facebook的内部项目,用于构架Instagram的网站,并与2013年5月开源。
3、特点
- 声明式设计,可以轻松描述应用。
- 通过Dom的模拟,最大限度减少与Dom交互
- 可以与已知的库或框架很好的配合
- JSX是js语法的扩展,react开发不一定用JSX,但我们建议使用它
- 通过react构建组件,使代码更加容易得到复用,能够更好的在大项目中开发
- 单向响应数据流,从而减少了重复代码,这也是为什么他比传统数据绑定更简单
4、react-dom
- 做dom用的 跑在浏览器端
- 渲染/挂载
5、react-native
- native上面有个web-view
- 优点:流畅
- 缺点:麻烦
6、改变this指向
- apply数组时 => 立即执行
- call => 立即执行
- bind返回值:函数(不会执行)
7、事件
e.currentTarget:绑定事件的dom
e.target:触发事件的dom
//阻止事件默认行为
e.preventDefault();
//阻止事件冒泡
e.stopPropagation();
8、组件
- 容器组件 => 只有state(只能通过class来定义)
- 视图组件 => 没有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
})
定位
// 点击的时候调用这个方法
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
})
}
}
组件优化
Component的两个问题:
- 只要执行setState(),即使不改变状态数据,组件也会重新render();
- 只当前组件重新render(),就会自动重新render子组件
原因在于component中的shouldComponentUpdate()总是返回true
解决:
- 重写shouldComponentUpdate()方法,比较旧state或props数据,如果有变化返回true,如果没有变化返回false
- 使用PureComponent,只有state或props数据变化才返回true