课程内容

1、React基础

2、React Hooks

3、React路由

4、React Redux

5、组件库

6、Immutable

7、Mobx

8、React+TS

9、单元测试

10、dva+umi

一、React介绍

1、React起源与发展

2、React与传统MVC的关系

3、React的特性

4、虚拟DOM

二、create-react-app

1、全局安装脚手架并创建第一个react项目

2、临时安装脚手架并创建第一个react项目

3、常见问题

三、编写第一个react应用程序

四、JSX语法与组件

1、JSX语法（js+xml）

2、Class组件

3、函数式组件

function App(){return(
hello functional Component
)
}/*16.8之前 无状态组件16.8之后 react hooks有状态了
*/
export default App

4、组件嵌套

import React, { Component } from 'react'class Navbar extends Component{render(){return(
 Navbar 
)}
}function Swiper(){return 
 Swiper 
}const Tabbar = ()=> 
 Tabbar 
export default class App extends Component {render() {return (
)}
}

5、组件的样式

import React, { Component } from 'react'
import './css/01-index.css'export default class App extends Component {render() {var myname = "kerwin"var obj = {background:'red'}return (
{10 + 20 } - {myname}{10 > 20? 'aaa':'bbb'}
obj}>1111111111
{background:'yellow'}}>2222222222
3333333333
用户名：
)}
}

五、事件处理

1、绑定事件

import React, { Component } from 'react'export default class root extends Component {render() {return (
()=>{console.log("click");}}>add1this.handleClick2}>add2this.handleClick3}>add3this.handleClick4}>add4
)}handleClick2(){console.log("click2");}handleClick3 = ()=>{console.log("click3");}handleClick4 = ()=>{console.log("click4");}
}

import React, { Component } from 'react'export default class root extends Component {a = 100render() {return (
()=>{console.log("click");}}>add1this.handleClick2.bind(this)}>add2this.handleClick3}>add3()=>this.handleClick4("比较推荐的使用方式，可以传参")}>add4
)}handleClick2(){console.log("click2",this.a);}handleClick3 = ()=>{console.log("click3");}handleClick4 = ()=>{console.log("click4");}
}

2、call、apply、bind

/*
call，改变this指向，自动执行函数
apply，改变this指向，自动执行函数
bind，改变this指向，手动执行函数
*/var obj1 = {name:"obj1",getName(){console.log(this.name);}
}var obj2 = {name:"obj2",getName(){console.log(this.name);}
}obj1.getName.call(obj2)
obj1.getName.apply(obj2)
obj1.getName.bind(obj2)
console.log("----------------------")
obj1.getName.bind(obj2)()

3、react事件绑定的位置（面试喜欢问）

/*React并不会真正的绑定事件到每一个具体的标签元素上，而是采用事件代理的模式
*/
handleClick3 = (evt)=>{console.log("click3",evt.target);}

6、ref