zoukankan html css js c++ java

React基礎

一. 安装React

npm install -g create-react-app

二. 创建项目

create-react-app 项目名称

三. 启动

yarn start

四. 查看webpack配置

yarn eject

五. 组件的定义方式

使用class关键字创建组件的特点：
- 使用class关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；
- 用class关键字创建出来的组件叫做有状态组件【用的最多】
使用function关键字创建组件的特点：
- 使用function创建的组件，只有props, 没有自己的私有数据和生命周期函数；
- 用构造函数创建出来的组件：叫做无状态组件【无状态组件用的不多】

无关的东西

const flag = false; 区分 自动播放(false) 和 拖动播放(true)

if(!flag) 等价于 (flag === false) { //  if(flag) 拖动了  if(!flag)没有拖动

...逻辑

}

六.生命周期

(Mounting)挂载

constructor
- 通过给 this.state赋值对象来初始化内部的state;
- 为事件绑定实例(this);
rander

这个钩子函数虽然是组件的渲染方法，但并不是真正意义上的把元素渲染成dom的方法，在它之后还有一个把元素渲染成dom的步骤，这一步只是return一个元素对象，这个并不是组件的执行渲染功能的函数，
- 渲染组件第一次进入时会触发
componentDidMount

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
- 依赖于DOM的操作可以在这里进行;
- 在此处发送网络请求最好的地方;(官方建议)
- 可以在此处添加一些订阅(会在componentWillUnmount取消订阅)

(Updating)更新时

componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。
- 当组件更新后，可以在此处对 DOM 进行操作；
- 如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）

(Unmounting)卸载

componentWillUnmount() 会在组件卸载及销毁之前直接调用。

componentWillUnmount
- 在此方法中执行必要的清理操作；
- 例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；

不常用生命周期

除了上面介绍的生命周期函数之外，还有一些不常用的生命周期函数：

getDerivedStateFromProps：state 的值在任何时候都依赖于 props时使用；该方法返回一个对象来更新state；
getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位置）；
shouldComponentUpdate：该生命周期函数很常用，但是我们等待讲性能优化时再来详细讲解；

详细描述:

七. 父传子通信-父传子

class类组件

/*
父组件: 通过自定义属性进行传值
子组件: 通过this.props接收数据
 */

// 子组件
class Son extends Component {
  constructor(props) { // 这个constructor 可以有可以无, 因为内部有默认的constructor
    super(props);      // constructor接受到参数, 然后通过props传给父类,
    this.props = props // super虽然代表父类的构造函数, 但是返回的是子类的实例, 即super内部的this指的是子类
  }
  render() {
    let {name, age, sex} = this.props // 此时的 this指的是子类的this
    return (
      <div>
        <h2>子组件接受父组件传来的数据: {name + " " + age + " " + sex}</h2>
      </div>
    )
  }
}

// 父组件
export default class App extends Component {
  render() {
    return (
      <div>
        <Son name="chenlong" age="23" sex="男"></Son>
      </div>
    )
  }
}

function组件

// 子组件
function Son(props) {
  const {name, age, sex} = props
  return (
    <div>
      <h2>{name + " " + age + " " + sex}</h2>
    </div>
  )
}

// 父组件
export default class App extends Component {
  render() {
    return (
      <div>
        <Son name="chen" age="23" sex="男"></Son>
      </div>
    )
  }
}

八. 父传子通信-属性验证

使用 PropTypes 类型检查
```
import PropTypes from 'prop-types';
```

function写法

function Son(props) {
  const { name, age, sex} = props

  return (
    <div>
      <h2>{name + age + sex}</h2>
    </div>
  )
}

Son.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  sex: PropTypes.string
}

class类写法

class Son extends Component{
  static propTypes = { // 属性验证
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string
  }

  static defaultProps = { // 默认数据
    name:'王小虎',
    age: '24',
    sex: '男'
  }

  render() {
    let {name, age, sex} = this.props
    return (
      <div>
        <h2>{name + age + sex}</h2>
      </div>
    )
  }
}

验证没通过报错:

九一. 父传子通信-子传父

/* 
父组件: 给子组件传递一个属性名, 并且绑定自己的函数
子组件: 通过触发this.props.父组件传递的属性名('需要传的值')
*/

class Son extends PureComponent {
render() {
  return (
    <div>
      <button onClick={e => {this.handlePush()}}>我是子组件</button> // 1.子组件创建一个事件
    </div>
  )
}
  handlePush(){
    this.props.SonComment('我是子组件传来的值') // 3. 子组件调用父组件传来的SonComment函数, 并且携带需要传的值
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <Son SonComment ={info => this.submitComment(info)} /> // 2.父组件自定义一个属性名SonComment
      </div>
    )
  }
  submitComment(val){ // 4.由于SonComment 绑定了submitComment事件,所以可以拿到子组件传来的值
    console.log('父组件-----' + val)
  }
}

九二. 父传子通信-子调用父组件的方法

/* 
子组件: 通过接受父组件传递过来的事件名字, 给自己绑定上
父组件: 传递一个事件名字
*/

//写法1 子组件
class Son extends Component {
  render() {
    const { add } = this.props // 3.接受父组件传递过来的事件名字, 给自己绑定上 
    return (
      <div>
        <button onClick={add}>子组件调用父组件+1</button> // 4.绑定在自己身上 
      </div>
    )
  }
}

//写法2 子组件
class Son extends Component {
  render() {
    const { add } = this.props // 3.接受父组件传递过来的事件名字, 给自己绑定上 
    return (
      <div>
        <button onClick={this.addComment}>子组件调用父组件+1</button> // 4.绑定在自己身上 
      </div>
    )
  }
}


// 父组件
export default class App extends Component {
  constructor(props){
    super(props)

    this.state = {
      counter: 0
    }
  }
  render() {
    return (
      <div>
        <h2>{this.state.counter}</h2>
        <button onClick={e => {this.add()}}>父组件+1</button>    
        {/* 2.给子组件传递一个叫add 的值(其实传的是一个函数) */} 
        <Son add={e => {this.add()}}></Son>   
      </div>
    )
  }
  add(){ // 1.先创建一个事件
    this.setState({
      counter: this.state.counter+1
    })
  }
}

十. Slot组件插槽

children实现

每个组件都可以获取到 props.children：它包含组件的开始标签和结束标签之间的内容。

比如
如果只有一个元素，那么children指向该元素；
如果有多个元素，那么children指向的是数组，数组中包含多个元素；
弊端：通过索引值获取传入的元素很容易出错，不能精准的获取传入的原生；

实现方式:

// 父组件
export default class App extends Component {
  render() {
    return (
      <div>
        <h2>父组件:</h2>
        <Navbar>
          <span>slot-left</span>
          <span>slot-center</span>
          <span>slot-right</span>
        </Navbar>
      </div>
    )
  }
}

// 子组件
export default class Navbar extends Component {
  render() {
    return (
      <div className="nav-wrap">
        <div className="nav-item nav-left">
          {this.props.children[0]} {/* 通过 props.children取值 */}
        </div>
        <div className="nav-item nav-center">
        {this.props.children[1]}
        </div>
        <div className="nav-item nav-right">
        {this.props.children[2]}
        </div>
      </div>
    )
  }
}

源码分析:

props实现

通过具体的属性名，可以让我们在传入和获取时更加的精准；

实现方式:

// 父组件 App.js
export default class App extends Component {
  render() {
    const slotLeft = <div>slot-left</div>
    const slotCenter = <div>slot-center</div>
    const slotRight = <div>slot-right</div>
    return (
      <div>
        <h2>父组件:</h2>
        <h2>props实现:</h2>
        <Navbar2 slotLeft={slotLeft} slotCenter={slotCenter} slotRight={slotRight}></Navbar2>
      </div>
    )
  }
}

// 子组件 Navbar.js
export default class Navbar2 extends Component {
  render() {
    const { slotLeft, slotCenter, slotRight } = this.props
    return (
      <div className="nav-wrap">
        <div className="nav-item nav-left">
          {slotLeft}
        </div>
        <div className="nav-item nav-center">
          {slotCenter}
        </div>
        <div className="nav-item nav-right">
           {slotRight}
        </div>
      </div>
    )
  }
}

十一.跨组件通信

中间组件层层传递

但是对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）。
如果我们在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。

// 第二层组件
function Navbar(props) {
  return (
    <div>
      <h2>用户昵称: {props.nickName}</h2>
      <h2>用户等级: {props.level}</h2>
    </div>
  )
}
// 第一层组件
class Main extends Component {
  render() {
    return (
      <div>
        <Navbar nickName={this.props.nickName} level={this.props.level}></Navbar>
        <ul>
          <li>设置1</li>
          <li>设置2</li>
          <li>设置3</li>
          <li>设置4</li>
        </ul>
      </div>
    )
  }
}
// 父组件
export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      nickName : 'chen',
      level: 99
    }
  }
  render() {
    const { nickName, level } = this.state
    return (
      <div>
        <Main nickName={nickName} level={level}></Main>
        <h2>其他内容</h2>
      </div>
    )
  }
}

我这边顺便补充一个小的知识点：Spread Attributes

https://zh-hans.reactjs.org/docs/jsx-in-depth.html

属性展开：

如果你已经有了一个 props 对象，你可以使用展开运算符 ... 来在 JSX 中传递整个 props 对象。以下两个组件是等价的：

但是，如果层级更多的话，一层层传递是非常麻烦，并且代码是非常冗余的：

React提供了一个API：Context；
Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props；
Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言

2. Context相关的API

2.1 React.createContext 第一步

const MyContext = React.createContext(defaultValue);

创建一个需要共享的Context对象:
如果一个组件订阅了Context, 那么这个组件会从离自身最近的那个匹配的 Provider中读取到当前的context值
defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值(可以在里面放对象)

2.2 Context.Provider 第二步

<MyContext.Provider value={/* 某个值 */}> // value: 代表需要共享的值

每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：
Provider 接收一个 value 属性，传递给消费组件；
一个 Provider 可以和多个消费组件有对应关系；
多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据；
当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染；

2.3 Class.contextType 第三步

挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象：

这能让你使用 this.context 来消费最近 Context 上的那个值；
你可以在任何生命周期中访问到它，包括 render 函数中；

MyClass.contextType = MyContext // myclass组件要订阅--> MyContext上的context(也就是共享出来的值)

源码

由于context是源码里已经声明了, 所以可以直接使用这个属性

↑↑↑ 以上是class式组件订阅context的写法

2.4 Context.Consumer 函数式组件订阅context的方法

这里，React 组件也可以订阅到 context 变更。这能让你在 函数式组件 中完成订阅 context。
这里需要函数作为子元素（function as child）这种做法；

这个函数接收当前的 context 值，返回一个 React 节点；

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

3. Context使用过程

class写法:

import React, { Component } from 'react'

// 1.创建一个共享的Context对象:
const UserContext = React.createContext({ 
  nickName: '小陈', // 默认值
  level: -1
})

// 孙组件
class Navbar extends Component{
  render() {
    console.log(this.context)
    return (
      <div>
        <h2>用户昵称: {this.context.nickName}</h2> // 消费context里面的值
        <h2>用户等级: {this.context.level}</h2>
      </div>
    )
  }
}

Navbar.contextType = UserContext; // 3.把 <UserContext.Provider>组件 value绑定的值,传给Navbar组件, 然后Navbar可以通过 context拿到传来的数据

// 子组件
class Main extends Component {
  render() {
    return (
      <div>
        <Navbar ></Navbar>
        <ul>
          <li>设置1</li>
          <li>设置2</li>
          <li>设置3</li>
          <li>设置4</li>
        </ul>
      </div>
    )
  }
}

// 父组件
export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      nickName : 'chen',
      level: 99
    }
  }
  render() {
    return (
      <div>
        {/* 2.接受一个 value属性, 传递个消费组件 */}
        <UserContext.Provider value={this.state}>
          <Main></Main> 
        </UserContext.Provider>
        <h2>其他内容</h2>
      </div>
    )
  }
}

function函数组件写法:

什么时候使用Context.Consumer呢？

1.当使用value的组件是一个函数式组件时；
2.当组件中需要使用多个Context时；

演练一:

import React, { Component } from 'react'

// 1.创建一个共享的Context对象:
const UserContext = React.createContext({ 
  nickName: '小陈', // 默认值
  level: -1
})

// 孙组件
function Navbar() { 
  return (            /*3.使用 Consumer消费订阅的值  */
    <UserContext.Consumer> 
      {
        value => { /* 4.基于context进行渲染 */
          return (
            <div>
              <h2>用户昵称: {value.nickName}</h2>
              <h2>用户等级: {value.level}</h2>
            </div>
          )
        }
      }
    </UserContext.Consumer>
  )
}

// 子组件
class Main extends Component {
  render() {
    return (
      <div>
        <Navbar ></Navbar>
        <ul>
          <li>设置1</li>
          <li>设置2</li>
          <li>设置3</li>
          <li>设置4</li>
        </ul>
      </div>
    )
  }
}

// 父组件
export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      nickName : 'chen',
      level: 99
    }
  }
  render() {
    return (
      <div>
        {/* 2.接受一个 value属性, 传递个消费组件 */}
        <UserContext.Provider value={this.state}>
          <Main></Main> 
        </UserContext.Provider>
        <h2>其他内容</h2>
      </div>
    )
  }
}

演练二:

import React, { Component } from 'react'

// 1.创建一个共享的Context对象:
const UserContext = React.createContext({ 
  nickName: '小陈', // 默认值
  level: -1
})

// 2.创建第二个共享的Context对象
const ColorContext = React.createContext({
  color:'pink'
})

// 孙组件
function Navbar() { 
  return (            /*4.使用 Consumer消费订阅的值  */
    <UserContext.Consumer> 
      {
        value => { /* 5.多个contenxt进行渲染 */
          return (
            <ColorContext.Consumer>
              {
                item =>{
                  return (
                    <div>
                      <h2>用户昵称: {value.nickName}</h2>
                      <h2>用户等级: {value.level}</h2>
                      <h2>颜色: {item.color}</h2>
                    </div>
                  )
                }
              }
            </ColorContext.Consumer>
          )
        }
      }
    </UserContext.Consumer>
  )
}

// 子组件
class Main extends Component {
  render() {
    return (
      <div>
        <Navbar ></Navbar>
        <ul>
          <li>设置1</li>
          <li>设置2</li>
          <li>设置3</li>
          <li>设置4</li>
        </ul>
      </div>
    )
  }
}

// 父组件
export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      nickName : 'chen',
      level: 99
    }
  }
  render() {
    return (
      <div>
        {/* 3.把值, 传递个消费组件 */}
          <UserContext.Provider value={this.state}>
            <ColorContext.Provider value={{color: "red"}}>
              <Main></Main> 
            </ColorContext.Provider>
          </UserContext.Provider>
        <h2>其他内容</h2>
      </div>
    )
  }
}

十二. setState详细解析和 React性能优化

1.setState

解决控制台打印异步问题:

this.setState({
  list: [...this.state.list,info]
},() =>{
 console.log(this.state.list)
})

2.SCU优化

在App中，我们增加了一个计数器的代码；
当点击+1时，会重新调用App的render函数；

而当App的render函数被调用时，所有的子组件的render函数都会被重新调用；

import React, { Component } from 'react';

function Header() {
  console.log("Header Render 被调用");
  return <h2>Header</h2>
}

class Main extends Component {
  render() {
    console.log("Main Render 被调用");
    return (
      <div>
        <Banner/>
        <ProductList/>
      </div>
    )
  }
}

function Banner() {
  console.log("Banner Render 被调用");
  return <div>Banner</div>
}

function ProductList() {
  console.log("ProductList Render 被调用");
  return (
    <ul>
      <li>商品1</li>
      <li>商品2</li>
      <li>商品3</li>
      <li>商品4</li>
      <li>商品5</li>
    </ul>
  )
}

function Footer() {
  console.log("Footer Render 被调用");
  return <h2>Footer</h2>
}

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0,
      message:'hello world'
    }
  }

/*  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.counter !== this.state.counter) {
      return true;
    }
  
    return false;
  }
 */

  render() {
    console.log("App Render 被调用");

    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
        <button onClick={e => this.changeText()}>改变文本</button>
        <Header/>
        <Main/>
        <Footer/>
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  changeText() {
    this.setState({
      message: "你好啊,李银河"
    })
  }
}

在以后的开发中，我们只要是修改了App中的数据，所有的组件都需要重新render，进行diff算法，性能必然是很低的：

事实上，很多的组件没有必须要重新render；
它们调用render应该有一个前提，就是依赖的数据（state、props）发生改变时，再调用自己的render方法；

如何来控制render方法是否被调用呢？

通过shouldComponentUpdate方法即可；

2.1 shouldComponentUpdate

如何来控制render方法是否被调用呢？

通过shouldComponentUpdate方法即可；

shouldComponentUpdate(nextProps, nextState) {
  if (nextState.counter !== this.state.counter) {
    return true;
  }

  return false;
}

这个时候，我们可以通过实现shouldComponentUpdate来决定要不要重新调用render方法：

这个时候，我们改变counter时，会重新渲染；
如果，我们改变的是message，那么默认返回的是false，那么就不会重新渲染；

2.2 PureComponent和memo

类组件使用 pureComponent来实现

如果所有的类，我们都需要手动来实现 shouldComponentUpdate，那么会给我们开发者增加非常多的工作量。

我们来设想一下shouldComponentUpdate中的各种判断的目的是什么？

props或者state中的数据是否发生了改变，来决定shouldComponentUpdate返回true或者false；

事实上React已经考虑到了这一点，所以React已经默认帮我们实现好了，如何实现呢？

将class基础自PureComponent。

把所有 Component 改成 PureComponent :

import React, { PureComponent } from 'react';

function Header() {
  console.log("Header Render 被调用");
  return <h2>Header</h2>
}

class Main extends PureComponent {
  render() {
    console.log("Main Render 被调用");
    return (
      <div>
        <Banner/>
        <ProductList/>
      </div>
    )
  }
}

PureComponent的原理是什么呢？

对props和state进行浅层比较；

查看PureComponent相关的源码：

react/ReactBaseClasses.js中：

在PureComponent的原型上增加一个isPureReactComponent为true的属性

React-reconcilier/ReactFiberClassComponent.js：

这个方法中，调用 !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)，这个shallowEqual就是进行浅层比较：

function组件使用memo来实现

我们需要使用一个高阶组件memo：

import React, { PureComponent,memo } from 'react';

const MemoHeader = memo(function Header() {
  console.log("Header Render 被调用");
  return <h2>Header</h2>
})

十三. setState不可变的力量

PureComponent使用了性能优化, 如果数据没发生变化, rander不会重新更新

  handleName(val){
    const newData = [...this.state.list]
    newData[val].age +=1
    this.setState({
      list: newData
    })
  }

十四. 全局事件传递(bus)

兄弟组件传值

yarn add events

/*
 * @Date: 2021-06-23 22:07:26
 */
import React, { Component, PureComponent } from 'react'
import { EventEmitter} from 'events'

// 事件总线: event bus
const eventBus = new EventEmitter()

class  SonOne extends PureComponent {

  componentDidMount(){// 页面加载监听的事件, 以及参数
    // eventBus.addListener('getName',(name,age) => { 
    // })
    eventBus.addListener('getName', this.handleGetNameListener) // 常用写法
  }

  componentDidUpdate(){ // 页面卸除 取消事件监听
    eventBus.removeListener("getName",this.handleGetNameListener)
  }

  handleGetNameListener(name,age){
    console.log(name,age)
  }

  render() {
    return (
      <div>
        sonOne
      </div>
    )
  }
}
class  SonTwo extends PureComponent {
  render() {
    return (
      <div>
        SonTwo
        <button onClick={e =>this.emmitEvent()}>点击了SonTwo</button>
      </div>
    )
  }
  emmitEvent(){
    eventBus.emit("getName","陈龙",23) // 触发一个消息
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <SonOne></SonOne>
        <SonTwo></SonTwo>
      </div>
    )
  }
}

十五. 全局事件传递(bus)

1. 通过ref操作DOM

import React, { createRef, PureComponent } from 'react'

export default class App extends PureComponent {
  constructor(props){
    super()

    this.titleRef = createRef()
    this.titleEl = null
  }
  render() {
    return (
      <div>
        {/* 方法一: ref */}
        <h2 ref="title">String Ref</h2>

        {/* 方式二: React.createRef() */}
        <h2 ref={this.titleRef}>Hello Create Ref</h2>

        {/* 方式三: 传入一个函数 */}
        <h2 ref={element => this.titleEl = element}>改变文本</h2>

        <button onClick={e => this.changeText()}>改变文本</button>
      </div>
    )
  }
  changeText(){
    this.refs.title.innerHTML = "你好啊,猜猜猜"
    this.titleRef.current.innerHTML = "你好啊,猜猜猜"
    this.titleEl.innerHTML = "你好啊,猜猜猜"
  }
}

2. 通过ref触发子组件的方法

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.counterRef = createRef()
  }

  render() {
    return (
      <div>
        <Counter ref={this.counterRef}/>
        <button onClick={e => this.increment()}>app +1</button>
      </div>
    )
  }

  increment() { // 父组件调用子组件的方法
    this.counterRef.current.increment();
  }
}

函数式组件是没有实例的，所以无法通过ref获取他们的实例：

但是某些时候，我们可能想要获取函数式组件中的某个DOM元素；
这个时候我们可以通过 React.forwardRef ，后面我们也会学习 hooks 中如何使用ref；

3.受控组件

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。

而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们将两者结合起来，使React的state成为“唯一数据源”；
渲染表单的 React 组件还控制着用户输入过程中表单发生的操作；
被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”；

例如，如果我们想让前一个示例在提交时打印出名称，我们可以将表单写为受控组件：

十五.高阶组件

1.1 高阶组件的使用

import React, { PureComponent } from 'react'

class App extends PureComponent { // 函数
  render() {
    return (
      <div>
        app {this.props.name}
      </div>
    )
  }
}

/* 高阶组件函数方式 */
function enhanceComponent(WrapperComponent){ // 1.高阶组件
  function NewComponent(props){
      return <WrapperComponent {...props}/>
  }
  return NewComponent
}

const EnhanceComponent = enhanceComponent(App) // 3. 调用高阶组件

export default EnhanceComponent

1.2 . 利用高阶组件, 实现跨组件通信

const UserContext = React.createContext({
  nickName: '小陈', // 这里代表默认数据
  level: -1
})

/* 封装的一个高阶函数, 专门实现夸组件通信 */
function withUser(WrapperCpn){
  return function(props){
    return (
      <UserContext.Consumer>
        {
          value => {
            return <WrapperCpn {...props} {...value} />
          }
        }
      </UserContext.Consumer>
    )
  }
}

/* class类的写法 */
class Home extends PureComponent {
  render(){
    return <h2> Home组件 {"昵称" + this.props.nickName + '年龄' + this.props.age + '性别' + this.props.gander}</h2>
  }
}

/* 函数写法 */
function Footer(props){
  const { nickName, age, gander} = props
  return <h2> Footer函数组件 {"昵称" + nickName+ '年龄' + age + '性别' + gander}</h2>
}

const UserHome = withUser(Home)
const UserFooter = withUser(Footer)

1.3 渲染判断鉴权(类似访问权限)

/* 高阶函数鉴权 */
function withAuto(WrapperComponent){
const NewCpn =  function(props){
    if(props.isLogin){ // 如果权限为真，就显示传来的组件页面
      return <WrapperComponent {...props}/> // 接受到的组件
    }else{
      return <Login/>
    }
  }
  NewCpn.displayName = "AutoCpn" // 组件重命名
  return NewCpn 
}

/* class写法 */
class Login extends PureComponent { // 登录
  render(){
    return <h2>请先登录!!!</h2>
  }
}

const AutoCartPage = withAuto(Cart) // 任何需要鉴权的页面都可以通过  调用 withAuto来鉴权

<AutoCartPage isLogin={true}/>{/* 购物车页面 */}

1.4 声明周期劫持(获取组件渲染时间)

function withTime(WrapperComponent){
  return class extends PureComponent{
    UNSAFE_componentWillMount(){ // 即将渲染获取一个时间 begin
      this.begin = Date.now()
    }
    componentDidMount(){ // 渲染完成再获取一个时间 end
      this.end = Date.now()
      const interval = this.end - this.begin
      console.log(`${WrapperComponent.name}渲染的时间为:${interval}`)// 获取传来的组件名字
    }
    render() {
      return (
        <div>
          <WrapperComponent {...this.props}/>
        </div>
      )
    }
  }
}

高阶函数(HOC)的意义

十六.组件内容补充

1.1 ref的转发 forwardRef

/* function组件可以使用 forwardRef高阶组件 */
const Son  = forwardRef(function(props,ref){
  return (
    <h2 ref={ref}>我是function函数组件使用ref</h2>
  )
})

1.2 Portals的使用

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

例子：全局弹窗modal

1.添加一个节点

2.使用ReactDom渲染节点

import React, { PureComponent } from 'react'
import ReactDom from 'react-dom'

class Modle extends PureComponent {
  constructor(props){
    super(props)
  }
  render() {
    return ReactDom.createPortal(
      this.props.children, // 参数1: props.children 可以拿到组件里放的所有子节点
      document.getElementById('modal') // 参数2: 是要渲染到哪一个DOM上
    )
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <Modle>
         <h2>我是全局弹窗</h2>
        </Modle>
      </div>
    )
  }
}

1.3 Fragment (类似于vue 的template )

Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点

      <div>
        <p>我是节点,有div包裹</p>
        <> {/* <> 是 Fragment的简写 短语发  */}
          <h2>下面的使用了 Fragment没有div包裹</h2>
          <div>
            {
              list.map((item,index) => {
                return (
                  <Fragment key={item.name}>
                    <div>{item.name}</div>
                    <p>{item.age}</p>
                    <hr/>
                  </Fragment>
                )
              })
            }
          </div>
        </>
      </div>

1.4 StrictMode

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。

与 Fragment 一样，StrictMode 不会渲染任何可见的 UI；
它为其后代元素触发额外的检查和警告；
严格模式检查仅在开发模式下运行；它们不会影响生产构建；

可以为应用程序的任何部分启用严格模式：

不会对 Header 和 Footer 组件运行严格模式检查；
但是，ComponentOne 和 ComponentTwo 以及它们的所有后代元素都将进行检查；

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

十七.React中的样式选择

1.1 相比而言，React官方并没有给出在React中统一的样式风格：

由此，从普通的css，到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库；
最好的或者说最适合自己的CSS方案，
- 方案一：内联样式的写法；
  - 内联样式的优点:
    - 1.内联样式, 样式之间不会有冲突
    - 2.可以动态获取当前state中的状态
  - 内联样式的缺点：
    - 1.写法上都需要使用驼峰标识
    - 2.某些样式没有提示
    - 3.大量的样式, 代码混乱
    - 4.某些样式无法编写(比如伪类/伪元素)
- 方案二：普通的css写法；
  - 如果我们按照普通的网页标准去编写，那么也不会有太大的问题；
  - 但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响；
  - 但是普通的css都属于全局的css，样式之间会相互影响；
- 方案三：css modules；
  - 但是这种方案也有自己的缺陷：
    - 引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的；
    - 所有的className都必须使用{style.className} 的形式来编写；
    - 不方便动态来修改某些样式，依然需要使用内联样式的方式；
- 方案四：css in js（styled-components）；
  - 原理就是创建一个样式组件，该组件渲染之后是一个自己定义的标签
  - Wrapper组件跟其余的react组件一样，只不过现在他们有了自己的样式
  - CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等；
  - 依然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点；
  - 所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案；

这里选择方案四做演示:

1.2 css in js使用方法

1.2.1 标签模板字符串(介绍)

可以通过护板字符串的方式对一个函数进行调用

    const name = "chen"
    const age = "23"
    function test(...args){
      console.log(args)
    }

    test`aaa` //  ["aaa", raw: Array(1)]

    test`my name is ${name} , age is ${age}`

1.2.2 安装styled-components：

yarn add styled-components

1.2.3 styled-components

1.vscod css提示插件: vscode-styled-components

1.2.4 styled-components语法

基本语法

/*
 * @Date: 2021-06-30 23:01:53
 */
import React, { PureComponent } from 'react'
import styled from 'styled-components'

const HomeWrapper =  styled.div`
  font-size:50px;
  color: red;
  .banner {
    background-color: pink;
    span {
      background-color: green;
      margin-right: 20px;
      cursor: pointer;
      &.avtive{
        background-color: red;
        color: #fff;
      }
      &:hover{
        color: #fff;
      }
    }
  }

`

const TitleWrapper = styled.h4` /* 1.设置一个h2的标签样式(类名如果重复可以用此方法解决) */
  text-decoration: underline;
`

export default class Home extends PureComponent {
  render() {
    return (
      <HomeWrapper>
        <TitleWrapper>我是home标题</TitleWrapper>{/* 2.使用专属标签 */}
        <div className="banner">
          <div>我是轮播图</div>
          <span className="avtive">1轮播图</span>
          <span>2轮播图</span>
          <span>3轮播图</span>
          <span>4轮播图</span>
        </div>

      </HomeWrapper>
    )
  }
}

一些标签自带的属性用法

第一种写法:

直接在标签上写属性

import styled from 'styled-components'

const InputWrapp = styled.input`
  background-color: lightblue;
  border-color: red;
`
export default class About extends PureComponent {
  render() {
    return (
      <div>
        <h2>我是about标题</h2>
        <InputWrapp placeholder="请输入文字"></InputWrapp> {/* 直接在标签上写属性  */}
      </div>
    )
  }
}

第二种写法进阶:

好处:

props穿透
attrs的使用
传入state作为props属性

可以使用 this.state对象的属性

import styled from 'styled-components'

const InputWrapp = styled.input.attrs({ // attributes:的缩写, 属性的意思
  placeholder:'请输入密码',
  bColor:'blue' // 定义一个属性值
})`
  background-color: lightblue;
  border-color: ${props =>props.bColor}; // 1.可以拿到 attrs里面定义的 属性值, 
  color:${props => props.color};// 2. 可以动态拿到 this.state对象里面的属性
`
export default class About extends PureComponent {
  constructor(props){
    super(props)
    this.state = {
      color: 'red'
    }
  }
  render() {
    return (
      <div>
        <h2>我是about标题</h2>
        <InputWrapp placeholder="请输入文字"></InputWrapp>
        <br/>
        <InputWrapp color={this.state.color}></InputWrapp>
      </div>
    )
  }
}

继承样式

const CLbutton = styled.button`
  padding:  10px 20px;
  border-radius: 10px;
  border-color: red;
  color: red;
`

const CLbutton2 = styled(CLbutton)` // 继承CLbutton的样式
  border-color: yellow;
`

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <h2>App</h2>
        <Home/>
        <About/>
        <p>样式的继承</p>
        <CLbutton>我是按钮</CLbutton>
        <CLbutton2>我是按钮2</CLbutton2>
      </div>
    )
  }
}

4.主题设置(全局设置样式)

import styled, { ThemeProvider} from 'styled-components' // 1.引用 ThemeProvider主题提供器

const CLbutton = styled.button`
  padding:  10px 20px;
  border-radius: 10px;
  border-color: red;
  color: red;
`

const CLbutton2 = styled(CLbutton)` // 继承CLbutton的样式
  border-color: yellow;
  color:${props => props.theme.themeColor}; // 3. 使用全局属性
`

export default class App extends PureComponent {
  render() {
    return (
      <ThemeProvider theme={{themeColor:'#01bd83',fontSize:'30px'}}> {/*2. 定义全局属性 */}
        <h2>App</h2>
        <Home/>
        <About/>
        <p>样式的继承</p>
        <CLbutton>我是按钮</CLbutton>
        <CLbutton2>我是按钮2</CLbutton2>
      </ThemeProvider>
    )
  }
}

十八.Classnames组件通过透出一个对象来匹配配置类名

React动态添加样式

npm install classnames --save
yarn add classnames // 或者

import classname from 'classnames'

<h4 className={classname("AA","BB","CC","DD")}>动态添加类名</h4>
<h4 className={classname({"active":isActive, "bar": isBar}, "wrap")}>动态添加类名</h4>
<h4 className={classname("AA",errClass,{"active":isActive})}>动态添加类名</h4>

十九. AntDesign UI

1.2. AntDesign的安装

npm install antd --save

import {Button ,DatePicker } from 'antd' // 组件
import 'antd/dist/antd.css' // 样式

1.3 高级配置

1.3.1修改create-react-app 的默认配置.

那么如何来进行修改默认配置呢？社区目前有两个比较常见的方案：

react-app-rewired + customize-cra；（这个是antd早期推荐的方案）
craco；（目前antd推荐的方案）

1.3.2 第一步: 安装creco

yarn add @craco/craco

1.3.3 第二部: 修改package.json文件

原本启动时，我们是通过react-scripts来管理的；
现在启动时，我们通过craco来管理；

"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

1.3.4 第三部: 在根目录下创建craco.config.js文件用于修改默认配置 (类似于vue.config.js)

module.exports = {
  // 配置文件
}

1.3.5 配置主题

按照配置主题的要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能：

我们可以引入 craco-less 来帮助加载 less 样式和修改变量；

1.安装 craco-less：

yarn add craco-less

2.修改craco.config.js中的plugins：

使用modifyVars可以在运行时修改LESS变量；

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
}

3.引入antd的样式时，引入antd.less文件：

// import 'antd/dist/antd.css'
import 'antd/dist/antd.less';

1.3.6 配置别名 @

在项目开发中，某些组件或者文件的层级会较深，

如果我们通过上层目录去引入就会出现这样的情况：../../../../components/button；
如果我们可以配置别名，就可以直接从根目录下面开始查找文件：@/components/button，甚至是：components/button；

配置别名也需要修改webpack的配置，当然我们也可以借助于 craco 来完成：

const path = require('path'); // path模块是node.js中处理路径的核心模块
const resolve = dir => path.resolve(__dirname,dir) // __dirname当前craco.congig.js的路径, dir指传传过来的路径, 进行拼接

module.exports = {
...
,
  webpack: {
    alias: { // 别名
      '@': resolve("src"), // @代表: __dirname(当前文件的路径) + src  所以=>   @ 等价于 /scr
      'components':resolve("src/components")// components代表: 使用components 等价于 components/src
    }
  }
}

在导入时就可以按照下面的方式来使用了：

import HYTitle from '../../title' // 原来的做法
import HYTitle from '@/components/title' // 使用 @

二十. React网络请求选择

1.Fetch Api

2.Axios的基本使用

2.1 安装 axios

npm i axios

2.2 二次封装axios

请求拦截加token , 响应拦截判断后端返回的响应码

二十一. react-transition-group

react-transition-group用来给一个组件的显示和消失添加某种过渡动画

1.0. 介绍

react-transition-group主要包含四个组件：

Transition
- 该组件是一个和平台无关的组件（不一定要结合CSS）；
- 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition；
CSSTransition
- 在前端开发中，通常使用CSSTransition来完成过渡动画效果
SwitchTransition
- 两个组件显示和隐藏切换时，使用该组件
TransitionGroup
- 将多个动画组件包裹在其中，一般用于列表中元素的动画；

2.0 CSSTransition使用

2.1 CSSTransition是基于Transition组件构建的：

自己通过 className="自定义一个类名" "chen-enter"// 就是显示时的class名字

CSSTransition执行过程中, 有三个状态: appear, enter, exit

动画流程	页面首次加载触发的动画	显示时触发的动画	隐藏时触发的动画
动画开始	-appear	-enter	exit
动画执行	-appear-active	-enter-active	-exit-active
动画结束	-appear-done	-enter-done	-exit-done

然后自己根据这些类名写需要的CSS动画样式

2.2 CSSTransition常见对应的属性：

in：触发进入或者退出状态(显示和隐藏的时候才要in)
- 如果添加了unmountOnExit={true}，那么该组件会在执行退出动画结束后被移除掉；
- 当in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
- 当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
classNames：动画class的名称
- 决定了在编写css时，对应的class名称：比如card-enter、card-enter-active、card-enter-done；
timeout：
- 过渡动画的时间
unmountOnExit:
- unmountOnExit = {true}
- 是否开始隐藏DOM 整个节点都隐藏
appear：
- 是否在初次进入添加动画（需要和in同时为true）需要配置 -appear, 所以最好的方法是 -appear 和 -enter 都设置成一个动画 .chen-appear , .chen-enter{}
其他属性可以参考官网来学习：
- https://reactcommunity.org/react-transition-group/transition

2.3. CSSTransition对应的钩子函数：

主要为了检测动画的执行过程，来完成一些JavaScript的操作

onEnter：在进入动画之前被触发；
onEntering：在应用进入动画时被触发；
onEntered：在应用进入动画结束后被触发；
onExit：退出动画前
onExiting：退出动画；
onExited：退出动画后

3. SwitchTransition

3.1 SwitchTransition可以完成两个组件之间切换的炫酷动画：

比如我们有一个按钮需要在on和off之间切换，我们希望看到on先从左侧退出，off再从右侧进入；
这个动画在vue中被称之为 vue transition modes；
react-transition-group中使用SwitchTransition来实现该动画；

3.2 SwitchTransition中主要有一个属性：mode，有两个值

in-out：表示新组件先进入，旧组件再移除；
out-in：表示就组件先移除，新组建再进入；

3.3如何使用SwitchTransition呢？

SwitchTransition组件里面要有CSSTransition或者Transition组件，不能直接包裹你想要切换的组件；
SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态，取而代之的是key属性；

我们来演练一个按钮的入场和出场效果：

4. TransitionGroup

当一个React组件添加或者移除一个DOM的时候可以轻易的实现CSS动画
你必须为CSSTransitionGroup的子级元素添加一个key属性，即使是渲染一个唯一的子元素的时候。React通过key来判断那个子级元素进入视野或者离开视野(显示或者隐藏)

二十二. React中的纯函数

确定的输入，一定会有产生确定的输出（输出得到的结果，是确定中的值）
函数在执行过程中，不能产生副作用

1.0 纯函数需要满足一下几点

相同输入总是会返回相同的输出。
不产生副作用。
不依赖于外部状态。

例子1：纯函数

function sum(num1, num2){
      return num1 + num2
    }
    sum(20,30)
    sum(20,40)

例子2：不是纯函数

/* 不是纯函数，在执行中产生副作用 */
    function print(info){
      info.name = "xxx" // 修改了值
      console.log(info.name)
    }

二十三. Redux

1.0 整体做法

/* 整体写法 */

// const redux =  require('redux')
import redux from 'redux' // node.js V13.2才支持

// 1.默认数据
const initialState = { 
  counter: 0
}

// 2.创建一个 reducer纯函数
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {...state,counter: state.counter + 1}
      case 'DECREMENT':
        return {...state,counter: state.counter - 1}
    default:
      state;
  }
}

// 3. store(创建的时候需要传入一个reducer)
const store = redux.createStore(reducer)

// 5.订阅store的修改
store.subscribe(() => {
  console.log('counter', store.getState().counter)
})


// 4. 创建actions
const action1 = {type: "INCREMENT"};
const action2 = {type: "DECREMENT"};

// 5.派发actions
store.dispatch(action1)
store.dispatch(action2)

1.2 封装写法(开发模式)

actionCreators.js 派发的函数

/* 3. 创建actions派发的函数
 * 导入全局常量派发名字 constants.js
 * @Date: 2021-07-04 23:10:05
 */
import {ADD_NUMBER,SUB_NUMBER} from "./constants.js"

export function addAction(num) {
  return {
    type: ADD_NUMBER, // 4.这里派发的名字是由constants.js管理
    num
  }
}

export function subAction(num) {
  return {
    type: SUB_NUMBER, 
    num
  }
}

constants.js 放一些常量

/* 4.在这里用常量保存 axion派发的名字(统一方便管理)
 * @Date: 2021-07-04 23:16:33
 */
export const ADD_NUMBER = "ADD_NUMBER"
export const SUB_NUMBER ="SUN_NUMBER"

index.js主要文件移入 redux

/* 1.做中间键(主要文件)
   2.引入redux包, 
   3.导入默认值state 和 纯函数(处理逻辑) reducer.js
 * @Date: 2021-07-04 22:48:29
 */
import redux from 'redux'

import reducer from './reducer.js'

/* store(创建的时候需要传入一个reducer)纯函数 */
const store = redux.createStore(reducer)

export default store

reducer.js 用来处理state的文件

/* 2.创建一个默认值 和 纯函数(加需要处理的逻辑)
 * @Date: 2021-07-04 22:51:27
 */

import { ADD_NUMBER, SUB_NUMBER} from './constants.js'

// 创建一个默认值
const defaultState = {
  counter: 0
}

// 创建一个 reducer纯函数
function reducer(state = defaultState, action) {
  switch(action.type) {
    case ADD_NUMBER:
      return {...state, counter:state.counter + action.num}
    case SUB_NUMBER:
      return {...state, counter:state.counter - action.num}
    default:
    return state
  }
}

export default reducer

index2.js 业务文件(需要使用redux的文件)

/* 主要使用strore文件  
   1.导入store  index.js
   2.导入派发的函数 actionCreators.js
   3.订阅store的值
 * @Date: 2021-07-04 23:02:03
 */
import store from './store/index.js'

import {addAction, subAction} from './store/actionCreators.js'

// 订阅store的修改
store.subscribe(() => {
  console.log('counter', store.getState().counter)
})

// 派发函数
store.dispatch(addAction(10))
store.dispatch(subAction(8))

正常操作: constants .js ===>actionCreators .js ===> reducer.js ===> 业务文件(需要调用redux)派发action

1.3 Redux使用流程

1.4 脚手架里使用Redux

脚手架需要在 componentDidMount里订阅 store.subscribe

/*
 * @Date: 2021-07-05 21:01:27
 */
import React, { PureComponent } from 'react'

import store from '../store'

import { addAction,subAction } from '../store/actionCreators'

export default class Home extends PureComponent {
  constructor(prost) {
    super(prost)
    this.state = {
      counter: store.getState().counter
    }
  }

  componentDidMount() { // 订阅(只有订阅了 视图才会更新)
    this.unsubscribue = store.subscribe(() => {
      this.setState({
        counter: store.getState().counter
      })
    })
  }

  componentWillUnmount() { // 取消订阅
    this.unsubscribue()
  }

  render() {
    const { counter } = this.state
    return (
      <div>
        <span>home</span>
        <h2>当前计数: {counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
        <button onClick={e => this.addNumber(5)}>+5</button>
      </div>
    )
  }
  increment(){
    store.dispatch(addAction())
  }

  addNumber(num){
    store.dispatch(subAction(num))
  }
}

1.5 react-redux 库使用

本库并不是 Redux 内置，需要单独安装。因为一般会和 Redux 一起使用

1.0 下载

npm install --save react-redux

1.1 使用

import store from './store'
import { connect, Provider } from 'react-redux'
 ReactDOM.render(
   <Provider store={store}> // 固定属性store
     <App4 />
   </Provider>
 ,document.getElementById('root'));

1.3源码解析

ReactReduxContext来自另外一个文件：

connect函数最终调用的是connectHOC：

1.6 redux 异步请求

在组件中异步请求

1.7 redux异步请求 + 中间件redux-thunk(重要)

1.0 在redux中发送异步请求

1.1 使用步骤

1.先下载 redux-thunk中间件
```
yarn add redux-thunk
```
2.在store里引用中间件

3.在组件里调用一个派遣函数

4 派遣一个action

中转派遣

两个参数第一个派遣, 第二个可以拿到 store里面的数据

1.8 redux-saga

1.saga介绍

takeEvery：可以传入多个监听的actionType，每一个都可以被执行（对应有一个takeLastest，会取消前面的）
put：在saga中派发action不再是通过dispatch，而是通过put；
all：可以在yield的时候put多个action；

2. 安装

yarn add redux-saga

3. 使用

import { takeEvery, put, all } from 'redux-saga/effects';
import axios from 'axios'
import { FETCH_HOME_MULTIDATA } from './constants';
import { bologAction } from './actionCreators'

  function* fetchHomeMultdata(action) { //
    const res = yield   axios({
      url: 'https://c1998.cn/apis/get/',
      params: {
        page: 1,
        per_page: 10
      }
    })
    const data = res.data.data
    yield put(bologAction(data)) // put 代替了 dispatch
  }

  function* mySaga() {
    // yield takeEvery(FETCH_HOME_MULTIDATA, fetchHomeMultdata)

    yield all([
      yield takeEvery(FETCH_HOME_MULTIDATA, fetchHomeMultdata)
    ]);
  }

export default mySaga

1.9 reducer代码拆分

1.0 我们来看一下目前我们的reducer：

当前这个reducer既有处理counter的代码，又有处理home页面的数据；
后续counter相关的状态或home相关的状态会进一步变得更加复杂；
我们也会继续添加其他的相关状态，比如购物车、分类、歌单等等；

如果将所有的状态都放到一个reducer中进行管理，随着项目的日趋庞大，必然会造成代码臃肿、难以维护。

我们先抽取一个对counter处理的reducer：

// 1.我们先抽取一个对counter处理的reducer：
const initialCounterState = { // 默认值
  counter: 0
}
function counterReducer(state = initialCounterState, action) {
  switch(action.type) {
    case ADD_NUMBER:
      return {...state, counter:state.counter + 1}
    case SUB_NUMBER:
      return {...state, counter:state.counter + action.num}
    case Mult_NUMBER:
      console.log('xxx')
      return {...state, counter:state.counter * action.num}
    default:
      return state;
  }
}

再抽取一个对home处理的reducer：

// 再抽取一个对home处理的reducer：
const initialHomeState = {
  bologList:[]
}
function homeReducer(state = initialHomeState, action) {
  switch(action.type) {
    case BOLOG_LISTS:
      console.log('执行了kk',action)
      return {...state, bologList: action.bologList}
    default:
    return state
  }
}

合并起来

// 如果将它们合并起来呢？
function reducer(state = {}, action) {
  return {
    counterInfo: counterReducer(state.counterInfo, action),
    homeInfo: homeReducer(state.homeInfo, action)
  }
}

使用

1.1 合并reducers

combineReducers: 合并 redux

2.0 ImmutableJS

2.1 React中的state如何管理

React的作者自己的建议

具体代码看 06-text-react pages8(终极版本)

FAQ:

单向数据流:

二十四. Router路由原理

1.1前端路由原理

URL的hash

<a href="#/home">home</a>
<a href="#/about">about</a>
<div class="router-view"></div>

// 1.获取router-view
const routerViewEl = document.querySelector(".router-view");

// 2.监听hashchange,来显示对应页面的内容
window.addEventListener("hashchange", () => {
switch(location.hash) {
  case "#/home": 	
    routerViewEl.innerHTML = "home";
    break;
  case "#/about":
    routerViewEl.innerHTML = "about";
    break;
  default:
    routerViewEl.innerHTML = "default";
}
})

URL的hash也就是锚点(#), 本质上是改变window.location的href属性；
我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新；
hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。

1.2 HTML5的History

  const routerViewEl = document.querySelector(".router-view");

  // 2.监听所有的a元素
  const aEls = document.getElementsByTagName("a");
  for (let aEl of aEls) {
    aEl.addEventListener("click", (e) => {
      e.preventDefault();
      const href = aEl.getAttribute("href");
      console.log(href);
      history.pushState({}, "", href);
      historyChange();
    })
  }
  
   // 3.监听popstate和go操作
  window.addEventListener("popstate", historyChange);
  window.addEventListener("go", historyChange);
  
   // 4.执行设置页面操作, 来显示对应的页面内容
  function historyChange() {
    switch(location.pathname) {
      case "/home":
        routerViewEl.innerHTML = "home";
        break;
      case "/about":
        routerViewEl.innerHTML = "about";
        break;
      default:
        routerViewEl.innerHTML = "default";
    }
  }

history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面：

replaceState：替换原来的路径；
pushState：使用新的路径；
popState：路径的回退；
go：向前或向后改变路径；
forword：向前改变路径；
back：向后改变路径；

二十五. react-router

yran add react-router-dom

1.react-router最主要的API是给我们提供的一些组件：

BrowserRouter或HashRouter
- Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件；
- BrowserRouter使用history模式；
- HashRouter使用hash模式；
Link和NavLink：
- 通常路径的跳转是使用Link组件，最终会被渲染成a元素；
- NavLink是在Link基础之上增加了一些样式属性（后续学习）；
- to属性：Link中最重要的属性，用于设置跳转到的路径；
Route：
- Route用于路径的匹配；
- path属性：用于设置匹配到的路径；
- component属性：设置匹配到路径后，渲染的组件；
- exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件；

在App中进行如下演练：

import React, { PureComponent } from 'react'
import {BrowserRouter, Route, Link} from 'react-router-dom'
import Home from './Home'
import About from './About'
import Profile from './Profile'

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <BrowserRouter>
        <Link to="/">首页</Link>
        <Link to="about">关于</Link>
        <Link to="/profile">我的</Link>

        <Route exact path="/" component={Home}></Route>
        <Route path="/about" component={About}/>
        <Route path="/profile" component={Profile}/>
        </BrowserRouter>
      </div>
    )
  }
}

2. NavLink的使用

路径选中时，对应的a元素变为红色

这个时候，我们要使用NavLink组件来替代Link组件：

activeStyle：活跃时（匹配时）的样式；
activeClassName：活跃时添加的class；
exact：是否精准匹配；

先演示activeStyle：

{/* 自定义router选中高亮类名 */}
<NavLink exact to="/" activeClassName="link-active">首页</NavLink>
<NavLink to="/about" activeClassName="link-active">关于</NavLink>
<NavLink to="/profile" activeClassName="link-active">我的</NavLink>

3. Switch的作用

1.我们来看下面的路由规则：

当我们匹配到某一个路径时，我们会发现有一些问题；
比如/about路径匹配到的同时，/:userid也被匹配到了，并且最后的一个NoMatch组件总是被匹配到；

原因是什么呢？默认情况下，react-router中只要是路径被匹配到的Route对应的组件都会被渲染；

2.但是实际开发中，我们往往希望有一种排他的思想：

只要匹配到了第一个，那么后面的就不应该继续匹配了；
这个时候我们可以使用Switch来将所有的Route进行包裹即可；

4. Redirect(重定向)

Redirect用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中：

我们这里使用这个的一个案例：

用户跳转到User界面；
但是在User界面有一个isLogin用于记录用户是否登录：
- true：那么显示用户的名称；
- false：直接重定向到登录界面；

App.js中提前定义好Login页面对应的Route：

export default class uesr extends PureComponent {
  constructor(props){
    super(props)
    this.state = {
      isLogin: true
    }
  }
  render() {
    return this.state.isLogin ? (
      <div>
        <h2>user</h2>
        <h2>用户名:__</h2>
      </div>
    ):<Redirect to="/login"/> // 重定向
  }
}

5.路由嵌套

这里我们假设about页面中有两个页面内容：

商品列表和消息列表；
点击不同的链接可以跳转到不同的地方，显示不同的内容；

export default class About extends PureComponent {
  render() {
    return (
      <div>
        <NavLink exact to="/about" activeClassName="link-active">电器</NavLink>
        <NavLink exact to="/about/culture" activeClassName="link-active">衣服</NavLink>
        <NavLink exact to="/about/contact" activeClassName="link-active">食品</NavLink>

        <Switch>
          <Route exact path="/about" component={AboutProduct}></Route>
          <Route path="/about/culture" component={AboutMessagea}></Route>
          <Route path="/about/contact" component={AboutMessageb}></Route>
        </Switch>
      </div>
    )
  }
}

6.手动跳转路由

目前我们实现的跳转主要是通过Link或者NavLink进行跳转的，实际上我们也可以通过JavaScript代码进行跳转。

但是通过JavaScript代码进行跳转有一个前提：必须获取到history对象。

如何可以获取到history的对象呢？两种方式

方式一：如果该组件是通过路由直接跳转过来的，那么可以直接获取history、location、match对象；
方式二：如果该组件是一个普通渲染的组件，那么不可以直接获取history、location、match对象；

那么如果普通的组件也希望获取对应的对象属性应该怎么做呢？

前面我们学习过高阶组件，可以在组件中添加想要的属性；
react-router也是通过高阶组件为我们的组件添加相关的属性的；

如果我们希望在App组件中获取到history对象，必须满足以下两个条件：

App组件必须包裹在Router组件之内；
App组件使用withRouter高阶组件包裹；

index.js代码修改如下：

该组件是通过路由直接跳转过来的: 可以直接跳转

<button onClick={e => this.pushToProfile()}>前往我的</button>
  pushToProfile(){
    this.props.history.push("/user")
  }

该组件是一个普通渲染的组件: 不能直接跳转会报错

解决:

使用 withRouter()高阶函数导出的组件可以直接拿到 history

import { Route, Switch, NavLink, withRouter } from 'react-router-dom';
...省略其他的导入代码

class App extends PureComponent {
  render() {
    console.log(this.props.history);

    return (
      <div>
        ...其他代码
        <button onClick={e => this.pushToProfile()}>我的</button>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/profile" component={Profile} />
          <Route path="/:userid" component={User} />
          <Route component={NoMatch} />
        </Switch>
      </div>
    )
  }

  pushToProfile() {
    this.props.history.push("/profile");
  }
}

export default withRouter(App); // 使用 withRouter()导出路由

7.动态路由(传递参数)

传递参数有三种方式：

动态路由的方式；
search传递参数；
to传入对象；

1. 第一种: 动态路由传递 (拼接传递)

我们可以直接通过match对象中获取id；
这里我们没有使用withRouter，原因是因为Detail本身就是通过路由进行的跳转；

// 1.传递 app.js
<NavLink to={`/detail/${id}`} activeClassName="link-active">动态路由</NavLink>

<Route path="/detail/:id" component={Detail}/>

// 2. 接受参数detail.js
export default class Detail extends PureComponent {
  render() {
    const match = this.props.match; // 接受参数
    console.log(match)
    return (
      <div>
        <h2>Detail: {this.props.match.params.id}</h2>
      </div>
    )
  }
}

2. search传递参数 (query传递 ) /?name=whty&, 已经不推荐了

我们在跳转的路径中添加了一些query参数；

1.传递 app.js
<NavLink to="/detail2?name=why&age=18" activeClassName="link-active">search(query)传递</NavLink>

<Route path="/detail2" component={Detail2}/>

export default class Detail extends PureComponent {
  render() {
    const match = this.props.location.search; // 接受参数
    console.log(this.props.location.search)
    return (
      <div>
        <h2>detail2: {match}</h2>
      </div>
    )
  }
}

3.to传递参数

to可以直接传入一个对象

 const info = {name:'chen',age:'23', gander: '男'}
 // app.js
<NavLink to={{
  pathname:'/detail3',
  search:"?name=abc",
  state:info
}} activeClassName="link-active">to(params)传递</NavLink>

export default class Detail extends PureComponent {

  render() {
    const match = this.props.location.state; // 接受参数
    console.log(this.props.location.state)
    return (
      <div>
        <h2>detail3: {match.name}</h2>
      </div>
    )
  }
}

8.react-router-config 路由统一配置 (类似vue路由配置文件)***

目前我们所有的路由定义都是直接使用Route组件，并且添加属性来完成的。

但是这样的方式会让路由变得非常混乱，我们希望将所有的路由配置放到一个地方进行集中管理：

这个时候可以使用react-router-config来完成；

1.安装react-router-config：

yarn add react-router-config

2.创建router/index.js文件：

import Home from '../pages/Home'
import About,{AboutProduct, AboutMessageb, AboutMessagea} from '../pages/About'
import Profile from '../pages/Profile'

const routes = [
  {
    path:'/',
    exact: true,
    component: Home
  },
  {
    path:'/about',
    component: About,
    routes:[ // 子路由
      {
        path:'/about',
        exact: true,
        component: AboutProduct
      },
      {
        path:'/about/culture',
        component: AboutMessagea
      },
      {
        path:'/about/contact',
        component: AboutMessageb
      }
    ]
  },
  {
    path:'/profile',
    component: Profile
  },

]

export default routes

3. 在app配置路由: 使用路由占位符

import router from './router'
import  { renderRoutes } from 'react-router-config'

{renderRoutes(router)}  // 类似路由占位符

4. 如果是子组件: 使用路由占位符

在跳转到的路由组件中会多一个 this.props.route 属性；
该route属性代表当前跳转到的路由对象，可以通过该属性获取到 routes；

import  { renderRoutes } from 'react-router-config'

{renderRoutes(this.props.route.routes)}

9.路由懒加载(优化)

好处: 只有等当前路由使用了, 才去加载当前的页面或组件

1.router.js配置以下代码:

- import CLDdiscover from "@/pages/discover"
+ const CLDdiscover = React.lazy(_ => import("../pages/discover"));

2.APP.js配置以下代码:

3.通过懒加载打包, 里面的js会分开打

二十六. React Hooks

1. 简单总结一下hooks:

它可以让我们在不编写class的情况下使用state以及其他的React特性；
但是我们可以由此延伸出非常多的用法，来让我们前面所提到的问题得到解决；

Hook的使用场景：

Hook的出现基本可以代替我们之前所有使用class组件的地方（除了一些非常不常用的场景）；
但是如果是一个旧的项目，你并不需要直接将所有的代码重构为Hooks，因为它完全向下兼容，你可以渐进式的来使用它；
Hook只能在函数组件中使用，不能在类组件，或者函数组件之外的地方使用；

export default function CounterHook() {
 
   // 写法一
  // const arr = useState(0)
  // const state = arr[0]
  // const setState = arr[1]

  // 写法二
  const [count, setCount] = useState(0)

  return (
    <div>
      <h2>当前计数: {count}</h2>
      <button onClick={e => setCount(count + 1)}>+!</button>
    </div>
  )
}

2. useState解析

HOOK指的是useState,useEffect这样的函数

Hooks是对这类函数的统称

3.认识useState

4.useEffect (代替生命周期)

类似vue里面的 created()

1.0 目前我们已经通过hook在函数式组件中定义state，那么类似于生命周期这些呢？

Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects）；
所以对于完成这些功能的Hook被称之为 Effect Hook；

2.0 useEffect简介

useEffect，字面意思可以理解为"执行副作用操作"，对比于以前react class的写法，可以把 useEffect看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

3.0 使用方法

每次都触发

// 相当于 componentDidMount 和 componentDidUpdate
useEffect(() => {
  console.log(`You clicked ${count} times`);
});

只需要触发一次

 // 由于第二个参数传的是空数组，所以这里相当于componentDidMount
 useEffect(() => {
    console.log('订阅事件')
  },[])

当属性值发生变化才触发

export default function HookUseEffect() {
  const [count, setCount] = useState(0);

 // 只有当count发生变化的时候才会触发，show发生变化不会触发
  useEffect(() => {
    console.log('修改Dom', count)
  },[count])

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={e => setCount(count + 1)}>+1</button>
    </div>
  )
}

触发, 然后销毁

import React, { useEffect, useState } from 'react'

export default function CustomScorllHook() {
  const [count, setCount] = useState(0);
  useEffect(() => {  // 触发
    setCount(10)
    return () => { // 销毁
      setCount(0) 
    }
  })

  return (
    <div>
      <h2 style={{padding: "1000px 0"}}>当前的位置: {count}</h2>
    </div>
  )
}

useState默认值如果需要计算 ,可以写成一个回调函数

const [name, setName] = useState(() =>{
return JSON.stringify(window.localStorage.getItem('name'))
})

5.useContext(跨组件通信)

在之前的开发中，我们要在组件中使用共享的Context有两种方式：

类组件可以通过 类名.contextType = MyContext方式，在类中获取context；
多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context；

但是多个Context共享时的方式会存在大量的嵌套：

Context Hook允许我们通过Hook来直接获取某个Context的值(不需要嵌套)；

App.js

import React, { PureComponent } from 'react'

import ContextHookDemo2 from './04_useContext的使用/02.useContext写法'
 
export const UserContext = React.createContext();
export const ThemContext = React.createContext();

export default class App extends PureComponent {
  render() {
    return (
      <div>
         <UserContext.Provider value={{name:'chen',age:18}}>
           <ThemContext.Provider>
             {/* <ContextHookDemo></ContextHookDemo>自己的组件 */}
             <ContextHookDemo2/>
           </ThemContext.Provider>
         </UserContext.Provider>
      </div>
    )
  }
}

在对应的函数式组件中使用Context Hook：

import React,{useContext} from 'react'
import {UserContext,ThemContext } from '../App'

export default function App() {
  const user = useContext(UserContext)
  return (
    <div>
      <span>{user.name}</span>
    </div>
  )
}

6.useRedux

import React,{useState, useReducer} from 'react'

import reducer from './reducer'

export default function useReduxProfile() {

  const [state, dispatch] = useReducer(reducer, {counter: 0})

  return (
    <div>
        <h2>当前计数: {state.counter}</h2>
        <button onClick={e => {dispatch({type: "increment"})}}>+1</button>
        <button onClick={e => {dispatch({type: "decrement"})}}>-1</button>
    </div>
  )
}

很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是。

useReducer仅仅是useState的一种替代方案：

在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
或者这次修改的state需要依赖之前的state时，也可以使用；

单独创建一个reducer/counter.js文件：

数据是不会共享的，它们只是使用了相同的counterReducer的函数而已。

所以，useReducer只是useState的一种替代品，并不能替代Redux。

7.useCallback性能优化

子组件依赖的函数没有被改变，就不执行(组件的回调函数常用)

1.0 useCallback实际的目的是为了进行性能的优化.

如何进行性能的优化呢？

useCallback会返回一个函数的 memoized（记忆的）值；
在依赖不变的情况下，多次定义的时候，返回的值是相同的；

2.0 useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调第二个参数为要依赖的数据

在将一个组件中的函数，传递给子元素进行回调函数使用时，使用useCallback对函数镜像处理

8.useMemo性能优化

依赖的函数没有发生变化就不会执行

useCallback是useMemo的语法糖

例子1:

例子2:

9.useCallback 和 useMemo的区别

1.0 共同作用：

仅仅 依赖数据 发生变化, 才会重新计算结果，也就是起到缓存的作用。

2.0 两者区别：

useMemo计算结果是 return回来的值, 主要用于缓存计算结果的值，应用场景如：需要计算的状态
useCallback 计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

10. useRef

useRef返回一个ref对象，返回的ref对象在组件的整个生命周期保持不变。

最常用的ref是两种用法：

用法一：引入DOM（或者组件，但是需要是class组件）元素；
用法二：保存一个数据，这个对象在整个生命周期中可以保存不变；

1. 0 用法一: 引用dom

import React,{useRef,PureComponent} from 'react'

class Son extends PureComponent{ 
  render(){
    return <h2>SON</h2>
  }
}

export default function useDomHook1() {

  const titleRef = useRef()
  const inputRef = useRef()
  const SonRef = useRef()

  function changeDom() {
    titleRef.current.innerHTML = "Hello world"
    inputRef.current.focus()
    console.log(SonRef.current,'xxx') // 打印组件的内容 只支持class组件
  }

  return (
    <div>
      <h2 ref={titleRef}>RefHookDome1</h2>
      <input type="text" ref={inputRef}/>
      <button onClick={ changeDom}>DOM替换title</button>
      <Son ref={SonRef}/>
    </div>
  )
}

1.1 用法二：使用ref保存上一次的某一个值

useRef可以想象成在ref对象中保存了一个.current的可变盒子；
useRef在组件重新渲染时，返回的依然是之前的ref对象，但是current是可以修改的；

export default function RefHooksDome2() {
  const numRef = useRef(10) // red可以默认传入一个值 
  const [count, setCount] = useState(0)

  // 利用useEffect的效果 , 只有count改变了 才执行 numRef.current赋值(记录上一次的数据)
   useEffect(() => { 
     numRef.current = count
   },[count])

  function addInter() {
    setCount(count + 10)
 }

  return (
    <div>
      <h2>RefHooksDome2: {numRef.current}</h2>
      <h2>计算: {count}</h2>
      <button onClick={addInter}>+10</button>
    </div>
  )
}

11.forwardRef 和useImperativeHandle

1.0 forwardRef

forwardRef可以用 ref 操作函数组件的所有dom方法

import React, {useRef, forwardRef } from 'react'

  const HyInput = forwardRef((props, ref) =>{
    return <input ref={ref} type="text" />
  })

export default function ForwardRedDome1() {

  const inputRef = useRef()

  return (
    <div>
      <HyInput ref={inputRef}/>
     <button onClick={e => inputRef.current.focus()}>操作function组件</button>
    </div>
  )
}

1.2 useImperativeHandle

useImperativeHandle也是用来操作函数组件的

forwardRef 和 useImperativeHandle区别

forwardRed是将子组件的DOM直接暴露给了父组件
useImperativeHandle可以只暴露固定的操作：
- 比如只允许父组件可以操作focus，其他并不希望它随意操作
- 相当于子组件暴露一个你只能修改color, 父组件通过ref只能修改color

import React, { useRef, forwardRef, useImperativeHandle } from 'react'

const HyInput = forwardRef((props, ref) => {
  const inputRef = useRef()

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus()
    }
  }))
  return <input ref={inputRef} type="text" />
})

export default function ForwardRedDome2() {

  const inputRef = useRef()

  return (
    <div>
      <HyInput ref={inputRef} />
      <button onClick={e => inputRef.current.focus()}>操作function组件</button>
    </div>
  )
}

12. useLayoutEffect

useLayoutEffect看起来和useEffect非常的相似，事实上他们也只有一点区别而已：

useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新；
useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；

如果我们希望在某些操作发生之后再更新DOM，那么应该将这个操作放到useLayoutEffect。

例子1:

通过点击更新 count, 此时执行一次dom更新, useEffect监听到count发生变化也会执行内部的setCount来修改DOM, 从而导致两次刷新两次dom操作,出现白屏

useLayoutEffect,可以代替useEffect, 等所有代码执行完毕后, 再进行DOM操作

import React, { useEffect, useLayoutEffect, useState } from 'react'

export default function UseLayoutEffectDom() {

  const [count, setCount] = useState(10)
  
  // 点击修改 count为:0 后会去更新dom, useEffect里面监听到count发生改变,也会更新dom 从而导致闪屏
  // useEffect(() => { 
  //   if(count == 0){
  //     setCount(Math.random()*50)
  //   }
  // },[count])

  // 使用 useLayoutEffect就不会出现闪屏, useLayoutEffect会等所有代码执行完毕后，再进行DOM的更新；
  useLayoutEffect(() => {
    if(count == 0){
      setCount(Math.random()*50)
    }
  },[count])

  return (
    <div>
      <h2>计数: {count}</h2>
      <button onClick={e => {setCount(0)}}>随机数</button>
    </div>
  )
}

14. 自定义hooks

1.0练习一: Context的共享

// app.js 创建需要共享的值
<UserContext.Provider value={{name:'chen'}}>
<ThemContext.Provider value={{value:'777'}}>
 <UseHooks/>
</ThemContext.Provider>
</UserContext.Provider>

// userHooks.js 创建自定义hook 封装Context 
import { useContext } from 'react'
import { UserContext, ThemContext} from '../App'

 function useUserContext() {
  const user = useContext(UserContext)
  const token = useContext(ThemContext)
  
  return [user, token] // 自定义hook返回两个值
 }

 export default useUserContext
 
 // cont.js 需要使用的共享数据的组件
 import React from 'react'
import useUserContext from '../hooks/user-hooks' // 引入自定义的hooks

export default function UserHooks() {
const [user, token] = useUserContext() // 直接获取自定义hook的函数
  return (
    <div>
      <h2>useHooks</h2>
      <h4>{user.name}</h4>
      <h4>{token.value}</h4>
    </div>
  )
}

1.1 练习二: 获取滚动距离

// use-scroll.js  创建自定义hooks
import { useEffect, useState} from "react";

function useScrollHook() {
  const [scollNumber, setScollNumber] = useState(0)

  const getScorll = () => {
    setScollNumber(window.scrollY)
  }

  useEffect(() =>{
    
    document.addEventListener('scroll',getScorll)
    return () => {
      document.removeEventListener('scroll',getScorll)
    }
  },[])
  return scollNumber
}

export default useScrollHook

// 使用自定义hooks
import React, { useEffect, useState } from 'react'
import useScrollHook from '../hooks/user-scroll-hook' // 导入自定义hooks

export default function CustomScorllHook() {

  const scrollTop = useScrollHook()
  console.log(scrollTop)

    return (
    <div style={{padding: "1000px 0"}}>
      <h2 style={{position: "fixed", left:0 , top:0}}>当前的位置:{scrollTop}</h2>
    </div>
    )
    }

1.2 练习三: 动态设置缓存

// user-store-hook.js 创建自动以hooks
import { useEffect, useState } from "react";

function useLocalStorage(key) { // 传入缓存名字
  const [name, setName] = useState(() => {
    return JSON.parse(window.localStorage.getItem('name'))
  })

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(name))
  },[name])

  return [name,setName] // 导出setName是为了好调用这个方法
}

export default useLocalStorage

// 使用自定义hooks
import useLocalStorage  from '../hooks/user-store-hook' // 导入自定义hooks

export default function CustomDataLocal() {

  // 使用自定义hook封装

  const [name, setName] = useLocalStorage('name')

  return (
    <div>
       <h2>CustomDataStoreHook: {name}</h2>
      <button onClick={e => setName("大哥666")}>设置</button>
    </div>
  )
}

二十七: 实战项目使用 redux

1.先下载依赖包

yarn add redux react-redux redux-thunk

2.配置目录:

3.先配置最大的store

4.配置一个: 合并所有子reudex 的 reducer文件

导入子redux: 这里是配置好了一个 bander , 所以先引用了:

5.通过Provider共享所有 store

6. 配置需要的子redux

创建一个bander文件夹 ,并且在文件夹内创建以下四个文件
创建一个 Module模块, 里面放左右子 redux; 方便好找
子redux 暴露出一个 reducer , 最外层的 reducer 利用 combineTeduers 对此进行合并

7.配置子redux

有两种写法:

第一种: 是通过connect()

mapStateToProps：更新props————>作为输入源。返回一个对象，key为UI界面对应的名称，value为state处理的结果
mapDispatchToProps：更新action————>作为输出源。触发action更新reducer，进而更新state, 引起UI的变化
缺点: 每次都需要写 mapStateToProps 和 mapDispatchToProps

第二种: 通过useSelector()

useSelector可以订阅store, 当action被dispatched的时候，会运行selector。可以直接拿到stort
优点: 代码简单明了,
缺点: useSelector 使用的是 === 来比较, 比较的是两个引用类型 , 所以每次都会没 re-render重新加载(浪费性能)
解决: 可以引用一个 shallowEqual(), 让 useSelector进行浅层比较;

整体流程图:

1.对应的代码流程图(connect写法):

2. 对应的代码流程图(hooks写法) 常用!!!!

useSelector()有个bug: 比较的是两个引用地址, 所以需要加上 shallowEqual

shallowEqual: 是进行浅层比较(比较的是值)

但是下图没有写: 需要自己加上

8.解决 hooks里使用 useSelector() 的方法

useSelector()将对前一个选择器结果值和当前结果值进行引用比较。 如果它们不同，则将强制重新渲染组件如果它们相同，则组件将不会重新渲染

1.例子:

当我在 home组件里更改redux里面的值 , about组件被重新渲染了(about组件没有依赖home更改的值)

about组件被重新加载了(这是非常浪费性能的)

2.原因?

因为useSelector是 === 比较两个引用类型, 所以每次都会被重新

3.解决办法: shallowEqual()

shallowEqual比较值相等，或者对象含有相同的属性、且属性值相等。(浅层比较)

源码: 因为 shallowEqual 是浅层比较比较的是值相等

二十八. 数据的可变引起的问题 (优化)

1.介绍 Immutable

Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

Map() : 是浅层比较只会比较一层对象,

fromJS(): 是深层比较

immutable.js

2.为什么要在redux里使用

因为在存函数里操作这个默认值,必须要进行浅拷贝一下(然后进行替换赋值)0
但是如果数据量很大, 并且全部进行拷贝那就很影响性能了

3.使用 Immutable

1. 下载

yarn add immutable

2.在redux.js 用Map包裹默认值, 并且设置一个key

3.使用 get() 拿刚刚设置的key

4.最后的优化 redux-immutable

Immutable 可以给应用带来极大的性能提升

1.下载

yarn add redux-immutable

2.使用

在最外层的 redux里使用

在最外层的 reducer.js修改一下配置

使用

查看全文

相关阅读:
tp5.1批量删除商品
 tp5.1 无限极分类前台展示
 jquery实现商品sku多属性选择（商品详情页）
简单的权限管理php
js的常用场景效果
 jquery 常用选择器基础语法学习
 js 注意事项使用误区
 js （单个的）点击式下拉菜单
 React中setState学习总结
 JavaScript面试核心考点(精华)

原文地址：https://www.cnblogs.com/cl1998/p/15172125.html

React基礎

二. 创建项目

三. 启动

四. 查看webpack配置

五. 组件的定义方式

六.生命周期

(Mounting)挂载

这个钩子函数虽然是组件的渲染方法，但并不是真正意义上的把元素渲染成dom的方法，在它之后还有一个把元素渲染成dom的步骤，这一步只是return一个元素对象，这个并不是组件的执行渲染功能的函数，

(Updating)更新时

(Unmounting)卸载

不常用生命周期

详细描述:

七. 父传子通信-父传子

八. 父传子通信-属性验证

九一. 父传子通信-子传父

九二. 父传子通信-子调用父组件的方法

十. Slot组件插槽

children实现

props实现

十一.跨组件通信

属性展开：

2. Context相关的API

3. Context使用过程

class写法:

function函数组件写法:

演练一:

演练二:

十二. setState详细解析 和 React性能优化

1.setState

解决控制台打印异步问题:

2.SCU优化

在以后的开发中，我们只要是修改了App中的数据，所有的组件都需要重新render，进行diff算法，性能必然是很低的：

如何来控制render方法是否被调用呢？

2.1 shouldComponentUpdate

2.2 PureComponent和memo

十三. setState不可变的力量

十四. 全局事件传递(bus)

十五. 全局事件传递(bus)

1. 通过ref操作DOM

2. 通过ref触发子组件的方法

3.受控组件

十五.高阶组件

1.1 高阶组件的使用

1.2 . 利用高阶组件, 实现跨组件通信

1.3 渲染判断鉴权(类似访问权限)

1.4 声明周期劫持(获取组件渲染时间)

高阶函数(HOC)的意义

十六.组件内容补充

1.1 ref的转发 forwardRef

1.2 Portals的使用

1.3 Fragment (类似于vue 的template )

1.4 StrictMode

十七.React中的样式选择

1.1 相比而言，React官方并没有给出在React中统一的样式风格：

方案一：内联样式的写法；

方案二：普通的css写法；

方案三：css modules；

方案四：css in js（styled-components）；

1.2 css in js使用方法

1.2.1 标签模板字符串(介绍)

1.2.2 安装styled-components：

1.2.3 styled-components

1.2.4 styled-components语法

十八.Classnames组件通过透出一个对象来匹配配置类名

十九. AntDesign UI

1.2. AntDesign的安装

1.3 高级配置

1.3.1修改create-react-app 的默认配置.

1.3.2 第一步: 安装creco

1.3.3 第二部: 修改package.json文件

1.3.4 第三部: 在根目录下创建craco.config.js文件用于修改默认配置 (类似于vue.config.js)

1.3.5 配置主题

1.3.6 配置别名 @

二十. React网络请求选择

1.Fetch Api

2.Axios的基本使用

二十一. react-transition-group

1.0. 介绍

2.0 CSSTransition使用

2.1 CSSTransition是基于Transition组件构建的：

十二. setState详细解析和 React性能优化

确定的输入，一定会有产生确定的输出（输出得到的结果，是确定中的值）

例子1：纯函数

例子2：不是纯函数

脚手架需要在 componentDidMount里订阅 store.subscribe