你好！React

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指向

1. apply数组时 => 立即执行
2. call => 立即执行
3. bind返回值：函数（不会执行）

7、事件

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
})

定位

// 点击的时候调用这个方法
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的两个问题：

1. 只要执行setState(),即使不改变状态数据，组件也会重新render();
2. 只当前组件重新render(),就会自动重新render子组件

原因在于component中的shouldComponentUpdate()总是返回true
解决：

1. 重写shouldComponentUpdate()方法，比较旧state或props数据，如果有变化返回true，如果没有变化返回false
2. 使用PureComponent，只有state或props数据变化才返回true