react入门学习之路

兔子公主
306 阅读5分钟

路程

  1. 基础知识：环境搭建、JSX、CSS、props
  2. 进阶知识：事件处理、state、生命周期、设计模式
  3. 生态工具：React router、AntDesign
  4. 高阶应用：Hooks、新生命周期、状态管理、TS应用
  5. 原理讲解：虚拟Dom、Fiber、diff算法

插件安装

  1. simple react snippets
  2. Prettier-code formatter
  3. npm install boostrap@4.4.1
  4. react-devtools

创建组件

  1. 应用位置：树状结构图里面位置是什么
  2. 确定参数：输入的参数和哪些初初始参数复用的场景
  3. 确定类型：函数组件？class组件？
  4. 组件内容：组件返回哪些内容

扎实基础

  1. 所有特性和vue进行比较

  2. 什么是React

    • 用于构建用户界面的JavaScript库

  3. JSX是什么

    • JSX是Javascript的语法扩展，使用XML标记的方式直接声明界面
    • 不是模板引擎语言
    • 声明式方式创建UI，处理UI逻辑
    • 遵循Javascript语法，无学习门槛

  4. JSX规则

    • 在JSX中嵌入表达式，用{}包裹
    • 大写开头作为定义组件，小写tag为原生dom节点
    • JSX标签可以有特定属性和子元素
    • JSX只能有一个根元素
    • 使用fragments将子元素包裹在一起，作用：（1.可以包含并列的子元素；2.编写表格组件，包裹子元素让html生效）

  5. 什么是props

    • 当React元素作为自定义组件，将JSX所接受的属性转换为单个对象传递给组件，这个对象被称为props;
    • props是组件的固有属性
    • 不可在组件内部对props进行修改
    • 更新props: 需要通过父组件重新传入新的props，更新子组件

  6. 函数组件与类组件的区别

  7. 函数组件要素

    • 函数组件也叫无状态组件
    • 组件内部没有this(组件实例)
    • 没有生命周期

  8. CSS module解决的问题

    • 全局污染
    • 命名混乱
    • 没有依赖管理
    • 不使用选择器，使用class名定义样式
    • 不层叠class，使用一个class定义样式
    • 用过compose来组合
    • 高阶：styled-component classnames

  9. React事件要素

    • React事件是合成事件，不是dom原生事件
    • 在document监听所有支持事件
    • 使用统一的分发函数dispatchEvent
    • 事件处理中this的注意事项
    • 时间处理如何传递参数
    • 父子组件之间事件参数传递
    • 事件机制

  10. State常规知识点

    • 如何定义State
      • 是否通过props从父组件获取
      • 是否可以通过其他state和props计算得到
      • 是否在render方法中使用
    • 如何修改State
      • 使用setState
      • setState是异步的
      • state的更新是一个浅合并（shallow merge）的过程
    • State的不可变原则
      • 创建新的状态，状态类型（值类型：数字，字符串，布尔值，null，undefined 数组类型用const items = this.satte.item.contact('price') 对象用const _item = Object.assin({},this.state.item,{price:9000} this.setState({item:_item})）
      • immutable-js的使用，状态的不可变
    • State和Props区别
      1. State
        • 可变的
        • 组件内部
        • 交互或者其他UI造成的数据更新
      2. Props
        • 在组件内部不可变
        • 父组件传入
        • 简单的数据流
      3. 联系
        • state通过props传入子组件
        • 传入的props初始化state

  11. State进阶知识点

    • 通过条件判断优化渲染
    • 使用不可变数据
    • 状态提升
    • 使用无状态组件
    • stateful和stateless的区别
      • stateful
        1. 类组件
        2. 有状态组件
        3. 容器组件
      • stateless
        1. 函数组件
        2. 无状态组件
        3. 展示组件
      • 尽可能通过状态提升原则，将需要的状态提取到父组件中，而其他的组件使用无状态组件编写

  12. 生命周期

    • 创建阶段constructor
      1. 初始化内部状态，显性设置和隐性设置
      2. 需要使用super()调用基类的构造方法
      3. 可以直接修改state
    • 创建阶段componentWillMount
      1. UI渲染完成前调用
      2. 只执行一次
      3. 这里调用setState不会触发render
    • 创建阶段 render
      1. 一个组件必须有的方法
      2. 返回一个顶级的react元素
      3. 渲染的是Dom Tree的一个React对象
    • 创建阶段componentDidMount
      1. UI渲染完成后调用
      2. 只执行一次
      3. 获取一些外部数据资源
    • 更新阶段componentWillReceiveProps
      1. 组件接收到新props的时候触发
      2. 在此对比新props和原来的props
      3. 不推荐使用
    • 更新阶段shouldComponentUpdate
      1. 是否要继续执行render方法
      2. 可以由PureComponent自动实现
    • 更新阶段render
    • 更新阶段componentDidUpdate
      1. 每次UI更新时调用
      2. 更新一些外部数据资源
    • 卸载阶段componentWillUnmount
      1. 组件移除时调用
      1. 可以用来做资源的释放

  13. React组件设计模式

    • 高阶组件
      const newComponent = higerOrderComponent(OldComponent);
      1. 一个函数，传入一个组件，返回一个新组件
      2. 一般不会有UI展现
      3. 提供一些可复用的功能
    • 函数作为子组件

  14. React Router

    • react-router-dom和react-router的区别
    • browserRouter和hashRouter的区别
    • Route匹配
      • Route
        • 比较path属性和当前地址的pathname.当一个匹配成功，它将渲染其内容，当它不匹配时就会渲染null
      • Switch
        • 一个会遍历其所有的子元素，并仅渲染与当前地址匹配的第一个元素
      • Link
        • 使用作为url的导航，让整个应用不刷新页面在不同网址之间切换
      • Route Props
        • 使用render props方案传递路由参数
      • Route参数
        • 在path中定义参数格式，在props match对象中获取参数
      • Query String
        • 使用第三方插件获得url当中的参数
      • 导航处理
        • 通过push或replace方法来处理浏览器历史导航

  15. Ant Design

    • 生态
      • DvaJS
      • UmiJS
      • ant design pro
      • ant motion
      • antV

  16. 单向数据流

  17. 上下文

  18. 父子组件传值

  19. 生命周期（render和mount区别）

  20. 父组件与子组件通信为什么不推荐

实例演练

github：github.com/fionaVg1/re…

闹钟组件

功能：

  1. 9:00 通知我们起床
  2. 21:00 通知我们休息

购物车

功能:

  1. 产品列表
  2. 产品详细
  3. 购物车功能
avatar
文章
阅读
粉丝