2019JAVA最新课程-React从入门到实战（新）

React是一个库，通过react类，可以自定义组件。里边支持jsx语法，通过props和state传参/维护状态。

其他插件，比如Router/Redux都是围绕着扩展/修改react对象里的属性来添加功能的

 

1.准备工作

       可以在yunp.top网站看webpack，node/npm，cnpm的相关使用视频教程

       react有两种使用方式，一是在现有网站中添加；二是创建一个全新的

　　官网创建全新一个react app步骤

　   1.npx create-react-app my-app

　　2.cd my-app

　　3.npm start　　 

　　（待定，熟悉react项目里的文件作用与架构）

2.JSX语法

　　1.react类

　　2.react-dom类

react-dom.render方法：两个参数。第一个是JSX语法写的标签（不是字符串或者对象），第二个是要插入的根容器标签

JSX语法：JavaScript + XML（HTML）结合形成的标签，包含了二者，可以在标签里直接用户js变量。遇到<>当XML语法解析，遇到{}当js语法解析

 

3.React元素渲染

 （）：代表存在标签结构，并且标签结构要换行

 所以可以用（）代表一个要被渲染的元素，赋给一个变量，直接传到render方法里

ele = (<div>

hello react

</div>

) 

ReactDOM.render(el, ...)

 

4.React创建组件

 组件文件后缀，jsx（有提示）或者js

要引入react库才能创建组件

创建组件两种方法：类和hook

类方式：

class a extends react.Component{

      render(){

　　　　return <h1>hello react</h1>
　　}

}

引用的时候，用<a />标签形式

 

5.组件Props属性

为组件复用

使用组件的时候，给组件标签属性赋值<Home navi={变量名}>（加花括号是因为这是jsx语法，navi=“数据”也行）

组件内部，通过this.pros.navi

 props不可以被修改

 

6.事件处理

传统的方式，用双引号包起来的函数名改用{} 来包起来

 <a href="#" onClick={handleClick}>

类的方法默认不会绑定this，在类方法里使用this会未定义

三个办法解决：

1.调用bind方法

this.handleClick = this.handleClick.bind(this);

2.属性初始化语法

 handleClick = () => {
    console.log('this is:', this);
  }

3.绑定的时候用lambda包起来

<button onClick={(e) => this.handleClick(e)}>

 

事件响应函数里加参数

两个办法

1.<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
2.<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

 

7.组件状态

 组件的状态用state属性存储

读：this.state.状态名

 改变用this.setState({状态名：this.state.count 【operation】})方法

 状态是为了不直接操作dom，在JSX里使用而提出的，面向数据，而不是DOM编程

 

8.组件生命周期函数

 componentWillMount：在组件渲染之前执行

 componentDidMount：在组件渲染之后执行

shouldComponentUpdate：是否应该更新

 componentWillUpdate：数据修改之前

componentDidUpdate：数据修改之后

componentWillReceiveProps：props发生改变时执行

componentWillUnmount：组件卸载前执行

 

 9.组件类的构造函数

constructor(props){

　　super(props);

　　this.state={count:10}//初始化state对象

}

 

 10.props可以接受函数做属性，子组件可以调用回调到父组件方法，改变父组件的属性

 

 11.setState可控的时候异步执行，不可控的时候同步执行

 setState第二个参数是回调函数，在修改成功后调用

 同步写法要结合Promise，async，await

 

 12.条件渲染

1.视图切换；2.默认缺省值

? : 来放不同的JSX标签

 

 13. 列表渲染 & key

<li>标签要有个key属性，即为map里的{index}

 key的作用是局部刷新

 

 14.表单受控组件

value的值通过state管理；非受控的自己搞dom管理

受控的，要给onChange事件设置响应函数，在响应函数里setState为e.target.value

事件.preventDefault：阻止提交改变网址

 

15.Refs & DOM

适用refs的情况

1.管理焦点，文本选择或媒体播放

2.触发强制动画

3.集成第三方dom库

 

通过React.createRef创建ref对象

ref.current既是当前DOM结点

 

16.表单非受控组件

当状态太多了，就不想自己管理状态。用非受控组件

通过current.value获取表单的值

 

17.状态提升：

父子组件间交换数据

 把数据放在父组件，再通过props给子组件

 

 18.组件组合

 props.children获取组件标签下的子组件。在render函数里渲染的时候引用输出。

这种情况是在引用组件的时候，把其他组件或者标签放在组件里边

 

 19.PropsType进行乐行检查

 增强健壮性

要求组件的propTypes属性指定相应props的类型，比如propTypes = {title：PropTypes.string}，PropTypes.string.isRequired代表这个属性一定要传

defaultProps对象指定相应属性默认值

 

 20.ANTD UI

npm install后，引入相应组件，及其css或者less文件

根据官网文档使用，可以设置相应属性，尤其是回调函数

 

21.ANTD按需加载，引入js自动引入css

1.js与css单个文件导入 

 

2.按照babel-plugin-import插件，配置antd

npm run eject（拉取webpack 配置）

安装插件，配置插件

 

22. Fetch get请求

 fetch基于promise

fetch(url).then(res => {}).then().catch() ...，默认get

 

23.Fetch post请求

fetch(url, {method: "post", headers:{}, body:"body字符串",...})。body可以用querystring库（stringify方法）来处理

 

 24.配置package解决跨域问题

开发环境：利用环境解决

生产模式：jsonp cors iframe postMessage

 

在package.json文件里，添加

"proxy":url字段

fetch的时候，可以不带url主机地址了

 

25.手动配置解决跨域问题

安装http-proxy-middleware

新建setupProxy.js,安装模板，修改目标网址 

 

26.封装网络请求 

api目录下 ：

base.js:公共数据，配置

index.js：对外接口

 util目录下：

 封装fetch

 

27.React Router

安装：npm install react-router-dom --save

 

引入BrowserRouter,Switch,Route,Link   对象

 

使用Route标签，引入路径和组件的映射

<Route path="/home" compontent={Login}/>

每个Route标签，要被BrowserRouter标签包起来

 

这样就配置好了，在浏览器里输入/home，就跳到Login组件页面 。浏览器地址栏没有被映射的path，就不会显示相应的组件，即默认不显示相应的被映射的组件，一定要有个地方引用到这个path才可以，Route标签仅仅是为了占位，path被点击到了这个位置就显示

 

28.BrowserRouter和HashRouter区别

锚点记录与history push实现（需要后台处理重定向，否则404）

 

29.Link跳转

<Link to=path />,生成跳转标签。to还可以用对象配置

 

30.exact匹配

Route标签，父组件的exact={true}或者直接exact,表面不会显示路径里的父组件

 

31.strict匹配

Route加strict属性，表明地址里最后有个/也不匹配。必须和exact一起使用

 

32.组件可以直接倒出一个lambda匿名函数，里边render 

 

33.Switch和404

Switch里面 放个Route，不配路径，全匹配。这样路径匹配不到，就显示这个组件

有了Switch标签，只会匹配一个，第一个匹配到的

 

34.render func

直接在Route标签里设置，render={lambda} 

 

35. NavLink高亮

选中后高亮标签，class为active。可以通过属性activeClassName改变class名称。属性activeStyle指定具体样式

 

36.URL参数

定义路由的时候，加/:id,在使用的时候，用props.match.param.id获取。/:id代表，表明参数可有可无

 

 37. query string读取参数

&分隔的在props.location.search里，待用URLSearchParams.get（key）来获取

或者用querystring.parse获取

 

38.Link的to属性

search添加&格式的参数，hash添加hash后缀，state为隐形参数，不在网址上暴露。props.location里包含这几个属性

 

39.重定向

不同路径，同一个页面

 <Redirect>标签from知道src，to指定dst

 

40.重定向push和replace

使用props.history的push和replace方法进行页面跳转

 

41.withRouter

这是一个高阶组件

组件想被Router管理，获取props里相应的Router对象，导出的时候可以用withRouter(组件)的格式

 

 42.Prompst

类似状态守卫，在某个状态的时候弹出文字，属性when是状态，message是提示文字

 

43.路由嵌套

 在父组件里，通过props.children显示被嵌套进来的子路由组件。即组件组合的情况

 

 44.redux介绍

 redux是一个Javascript状态容器，提供可预测化的状态管理

传统状态共享：

props，回传事件

兄弟之间共享：共同的父/子元素

 

45.Boot CDN加载

取boot cdn这个网站搜

 

46.引入Redux

npm install --save-dev redux，或者npm install --save-dev react-redux。这二者一个是给js用的，一个是给react封装好使用的

Ruedx通过reducer定义，存储状态。外界通过dispatch action改变state，通过getState获取状态

 

1.从redux引入createStore

2.定义reducer，为一个函数，有两个参数，state和action

3.createStore(reducer)创建store

4.store里的dispatch分发，参数是一个对象，{type:"Incremeant", }

5.store还有getState和subscribe，通过subscribe返回的函数注销监听器

目前一个store只有一个state

 

47.mapStateToProps

用<Provider>标签包住要渲染的标签，提供其store属性为createStore返回值

被包住的组件，要使用connect对象，用高阶组件的形式export connect()(组件)

connect里的参数，可以是个lambad函数，将state映射到counter，返回一个对象，key为props名value为state值，这样在this.prpos.key就可以读到了

 

45.dispatch

connect的第二个参数是mapDispatchToProps，一个lambda函数，返回的对象是动作到方法的映射。通过传进来的dispatch参数，调用自定义方法

这样props里，就有了相应的方法。

dispatch的是action，里面包含了给reducer的各种参数

 

46.bindActionCreators

在dispatchToProps里通过给binderActionCreators传参，参数是导入的*和dispatch，即可一次导入，这样直接引用props.key即可

 

47. 传参给reducer，可以在action对象里拿到。action方法里返回的是一个对象

 

48.combineReducers，合并reducers

把reducer扔进combineReducer，要使用引用的话，加一层，props里state.reducer来引用

 

49.中间件

引入appMiddleware

createStore第二个参数即是appMiddleware，里边自定义lambda函数。

这是一个截获过程，可以获取执行过程中的状态。所以要有骨架，执行返回正常流程

中间件名 = store =>  next => action =>{

     result = next(action)

     return result

}

 

50.logger中间件

npm install --save-dev redux-logger

可以打印整个过程里的action，state，并且带颜色

 

50.第三方thunk中间件

thunk中间件负责异步

npm install --save-dev redux-thunk安装

有了这个中间件，可以在timeout里调用dispatch 

 

thunk另一个异步作用是网络请求

网络请求后调用dispatch

 

thunk请求三种状态

1.请求中

2.成功

3.失败

 

state操作三大原则：

state是只读的

 

52. 调试工具

 chrome安装插件

React Developer Tools

Redux DevTools

需要安装依赖，npm install --save-dev redux-devtools-extension

使用的时候，传参给createStore第三个参数位；或者composeWithDevTools包裹插件传进第二个参数位

 

53.React进阶-组件优化

1.定时器，网络请求，事件监听，在组件销毁前要取消

2.shouldComponentUpdate两个参数，nextProps，nextState，可以用来判断和当前的值是否一致，决定是否渲染

3.PureComponent，对数据进行浅比较。比较props，变化才渲染

 

54.Fragment

Fragment标签，用来占位，防止没有root对象

 

55.Context

组件第一个参数是props，第二个是context。父组件设置context，下面多层的子组件可以直接使用

父元素实现函数getChildContext返回键值对

父元素设置childContextTypes

子元素设置conTextTypes

 

56.高阶组件

1.是个函数

2.参数一个组件

3.返回值一个组件

在对传入的组件进行一次加工

高阶组件定义（）=》（）{}

使用，（）（）

 

57.错误边界处理

一个组件出错，仅仅这一个组件不显示出来

定义一个组件，componentDidCatch，参数为error，errorInfo

用这个组件包住可能出现错误的组件

 

58.新特性 state hook

hook:不写class的情况下去操纵state和其他数据

直接写个function，return一个jsx语法

可以 export default () =>{}直接导出

 

要使用state，

1.import useState

2.定义一个数组， [count,setCount] = useState(0)//0表示默认值

3.直接使用count和setCount，不用this

可以看到，简单了很多

 

59.Effect Hook

useEffect代替生命周期函数

有三个：componentDidMount.componentDidUpdate,componentWillUnmount

useEffect传入箭头函数即可。

useEffect第二个参数是个数组，[]代表映射componentDidMount。没有第二个参数，代表componentDidMount,componentDidUpdate.

useEffect直接返回代表componentWillUnmount

[count]代表只有count更新，才会调用componentUpdate

 

60.hook使用好处

可以返回一个对象， 里边是相应的值和事件响应函数

使用的时候，{...hook返回值}即可

awesome react hooks可以找到很多这种常用代码段，方便复用

 

61.useEffect优化

 在回调函数里判断属性是否改变，决定是否渲染

 

62.网络请求hook下

可以用async await来做，封装为一个lambda

 

63.hook使用规则

不要在循环，条件，嵌套函数里使用hook

hook函数（userEffect，useStatge必须在顶层，所有的东西在他里面）

 

 64.componentWillUnmount

return的时候做收尾工作，return一个lambda

 

 65.memo

 memo是个高阶组件，对于hook形式的组件，放进去再返回即可。和PureComponent一个作用

 

66.useCallback优化

 包裹住回调函数，只在第二个参数变化的时候调用（除了第一次回调）

 

67.useReducer

通过useReducer返回state和dispatch，改变state通过调用dispatch

 

68.useContext

React.createContext创建context

子组件用创造context.Provider标签，指定value

子组件可以使用useContext(context)来获取

 

69.contextType

使用useContext后，子类指定statci contextType，就可以直接用this.context

 

70.setState

可以传一个lambd函数，prevState和props为参数

合并所有的异步执行，异步执行完毕后执行回调函数

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

y