React学习笔记

一.JSX的优点

1.书写简单 以html的方式书写代码

2.直接在jsx标签上注册事件

3.可以使用大括号语法

4.JSX 防止注入攻击 XSS

---

二.调用setState 发生一些什么(异步)

在代码调用setState之后，React会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程。经过调和过程React会构建新的React元素树 然后会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化的渲染。React能够精确地知道哪些位置发生了改变，这就保证了按需更新，而不是重新渲染。

setstate是异步的，但是在ajax里是同步的

**三.生命周期(16.4之前) **

1. 加载阶段

1.1.constructor()

1.3.render()

1.4.componentDidMount()

2. 变更阶段

2.1. componentWillReceiveProps (nextProps)

2.2.shouldComponentUpdate(nextProps,nextState)

2.3.componentWillUpdate (nextProps,nextState)

2.5.render()

2.4.componentDidUpdate(prevProps,prevState)

卸载阶段

1.5.componentWillUnmount ()

3. React新增的生命周期(个人补充)

3.1. getDerivedStateFromProps(nextProps, prevState)

3.2. getSnapshotBeforeUpdate(prevProps, prevState)

React的生命周期从广义上分为三个阶段：挂载、渲染、卸载

因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。

React的生命周期图:

image

React生命周期图 (16.4之前)

1. 挂载卸载过程

1.1.constructor()

constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。

注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。

1.2.componentWillMount()

componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。

1.3.componentDidMount()

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

1.4.componentWillUnmount ()

在此处完成组件的卸载和数据的销毁。

clear你在组建中所有的setTimeout,setInterval

移除所有组建中的监听 removeEventListener

有时候我们会碰到这个warning:

Canonly update a mounted or mounting component.Thisusually means you calledsetState()on an unmounted component.Thisisa no-op.Pleasecheck the codeforthe undefined component.

原因：因为你在组件中的ajax请求返回setState,而你组件销毁的时候，请求还未完成，因此会报warning

解决方法：

componentDidMount(){this.isMount===trueaxios.post().then((res)=>{this.isMount&&this.setState({// 增加条件ismount为true时aaa:res})})}componentWillUnmount(){this.isMount===false}

2. 更新过程

2.1. componentWillReceiveProps (nextProps)

在接受父组件改变后的props需要重新渲染组件时用到的比较多

接受一个参数nextProps

通过对比nextProps和this.props，将nextProps的state为当前组件的state，从而重新渲染组件

componentWillReceiveProps(nextProps){nextProps.openNotice!==this.props.openNotice&&this.setState({openNotice:nextProps.openNotice}，()=>{console.log(this.state.openNotice:nextProps)//将state更新为nextProps,在setState的第二个参数（回调）可以打 印出新的state})}

2.2.shouldComponentUpdate(nextProps,nextState)

主要用于性能优化(部分更新)

唯一用于控制组件重新渲染的生命周期，由于在react中，setState以后，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新

因为react父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断

2.3.componentWillUpdate (nextProps,nextState)

shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。

2.4.componentDidUpdate(prevProps,prevState)

组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。

2.5.render()

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。

image

image

getDerivedStateFromProps

static getDerivedStateFromProps(props, state)在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态，或者返回null来不更新任何内容。

getSnapshotBeforeUpdate(prevProps, prevState)

触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法

四、条件渲染

1.为什么要有key值

相同的key不会重新渲染

key是一个字符串，用来唯一标识同父同层级的兄弟元素。当React作diff时，只要子元素有key属性，便会去原v-dom树中相应位置（当前横向比较的层级）寻找是否有同key元素，比较它们是否完全相同，若是则复用该元素，免去不必要的操作。

但是强烈不推荐用数组index来作为key。如果数据更新仅仅是数组重新排序或在其中间位置插入新元素，那么视图元素都将重新渲染

React这个框架的核心思想是，将页面分割成一个个组件，一个组件还可能嵌套更小的组件，每个组件有自己的数据（属性/状态）;当某个组件的数据发生变化时，更新该组件部分的视图。更新的过程是由数据驱动的，新的数据自该组件顶层向下流向子组件，每个组件调用自己的render方法得到新的视图，并与之前的视图作diff-比较差异，完成更新。这个过程就叫作reconciliation-调和。

---

2、 **shortid ** 生成一个随机的key值

安装 cnpm i shortid -S

引入 import shortid from 'shortid'

获取随机值 shortid.generate()

**五、Form表单 **

1.非受控表单

表单值用户自己控制 不由代码控制

不需要实时验证时使用

可以通过ref获取表单的值

2.受控表单

：表单的值由我们控制，设置value和             onChange

需要实时验证 | 请求接口

六、路由

.路由传值

1. -** - query传值**： ？拼接 Home

  this.props.location.search  获取到传过来的值  然后用qs（cnpm i qs -S）解析成对象形式   如下 ：

 const query = qs.parse(

        this.props.location.search, 

        { ignoreQueryPrefix: true }   //  切割成对象 

  )

2. 动态路由传值

                        User-1

this.props.match.params 接受传过来的值

constructor (props) {

super(props)

console.log(this.props.match.params);

}

// 变更阶段 第一个生命周期

componentWillReceiveProps(nextProps){

console.log(nextProps.match.params);

}

React.Fragment

React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。

Fragments 看起来像空的 JSX 标签：但 Fragments 可以加key值 空标签不可以

---

编程式导航

1.this.props.history.push（） 跳到新路径

2.this.props.history.replace（） 会替换 旧的路径 跳到新路径

3.this.props.history.go（n）n 就是回退或者前进几步

---

路由异步加载

1.cnpm i react-loadable -S

2.在components下新建loadable 配置如下

import React from 'react'

import Loadable from 'react-loadable'

// 默认的loading

const Loading = () =>

loading...

export default function(loader,loading=Loading) {

 return Loadable({

   loader,

  loading，

})

}

3.import Loadable from '../components/Loadable';

const App = Loadable( () =>import ('../pages/app'))

---

使用propType检测props类型 组件传值 props 验证props

1.cnpm i prop-types -S

image

image

---

Redux 状态管理工具

1、store 一个项目只会有一个store

2、redux数据流 ： view用户界面操作 ->action(动作) ->reduce(修改state)

3、redux 三大原则 只有一个store state是只读的 reduce是一个纯函数

4、安装 cnpm i redux react-redux redux-promise redux-thunk -S

5、基本redux

image

6.redux 合并 combineReducers

image

image

image

7.安装redux谷歌插件 配置

安装cnpm i compose -S

-- -import {createStore, compose, combineReducers} from 'redux'

• --const composeEnhancers = window.REDUX_DEVTOOLS_EXTENSION_COMPOSE || compose

8、拆分封装 action

1.创建 action 文件夹

2. 安装中间件 thunk 和 promise 用 applyMiddleware 引用

cnpm i redux-promise redux-thunk -S

3.引入插件 ：

image

4、action 下 新建 js文件 每个 页面配置一套redux action

image

在action下的js文件 写方法 然后抛出去

image

然后在对应的页面调用这个action 触发

image

// 请求接口 数据存在redux里

image

image

image

// 请求的接口 拆分

image

image

loadsh JavaScript 实用工具库

1、安装 cnpm i loadsh -S

本地地址：