react知识点总结(加强版)

1.创建项目

  create、git、eject、scss(script)

  scss、env(打包)、本地开发联调(axios)、

  路由、代码分割

  项目真正的创建完成

  流程：

  1.npx create-react-app '文件名'

  2.提交git仓库

    命令:git add --all

         git commit -m ''

         git push

  3.yarn eject

  4.安装scss语法

  5.src同源目录创建打包文件.env

  6.本地开发联调

    安装axios(yarn add axios)

    安装http-proxy-middleware(yarn add http-proxy-middleware)

  7.安装路由

    yarn add react-router-dom

  8.代码分割

2.jsx

  模板引擎，需要外面有个大标签进行嵌套

3.props

  五种使用场景

  1、基本数据类型和复合数据类型（数据类型）

  2、组件

  3、children

  4、callback

  5、引入一个dom片段（html片段）(js方法 return)

     return(

      <div></div>

    )

    return <Left/> 

4.state

  唯一修改state方法setState，回调函数处理

5.生命周期

  render

  update

  willUnmount

  ajax 及数据返回处理

  挂载(ajax)

  constructor render componentDidMount 

  更新

  render componentDidUpdate

  卸载

  componentWillUnmount

  取消ajax方法:abort()

6.路由

  安装:yarn add react-router-dom

  路由原理：

  方式：#哈希值，/

  上线后404处理：Nginx

  路由传参：params(动态路由)、query(刷新页面就没有了)、state

  withRouter(解决的问题：隔代页面无法获取路由信息)

  页面a ---> 页面b:

  标签跳转:Link,NavLink

    区别：link点击页面时，会重新刷新页面；

          NavLink当点击页面时，URL地址会更新，组件会被重新渲染，但页面不会重新加载

  js跳转:push.replace

    区别：push:可以查看到上一级的来源

          replace:直接替换掉url，能查看来源

6+.事件

  取消事件冒泡

    e.stopPropagation()

  取消默认事件

    e.preventDefault()

  绑定this方法

    bind绑定、箭头函数

7.context

  props加强版

  context四种使用场景：

    传数据

    传回调函数

    传组件

    传dom片段

  store.js 三步：

    1.引入react包 import React from 'react'

    2.设置数据初始化

    3.创建context

  父级 三步：

    1.导入context(store.js);

    2.直接使用

    ResumeContext store.js 中创建的context

    ResumeContext.Provider  value赋的值

    <ResumeContext.Provider value={Resume}>

      <Child/>

    </ResumeContext.Provider>

  子子组件 三步：

    1.导入Context

    2.

      a.

      static contextType = ResumeContext;

      this.context

      b.

      View.contextType = ResumeContext;

      this.context

      c.

      <ResumeContext.Consumer>

        {

          (value) => (

            <div>

              {this.test(value)}<br/>

              {value.base.name}

            </div>

          )

        }

      </ResumeContext.Consumer>

8.hook

  解决的类组件和函数组件的区别

  useState 具备类属性

  useEffect

9.分页

10.tab切换

11.表单

12.登录注册

13.axios ajax

函数组件和类组件区别：

props接收方式不一样

页面渲染的方式不一样

正常页面没有state

函数组件没有生命周期 通过useEffect解决