上海《React+redux 高阶实战周末班》课程记录(二)

妙味 React 框架周末班课程实录第二集来了~

  • 真实的妙味周末班上课详情实录;
  • 知识点、案例、重点要点解析;
  • 即使不在现场,也能感受到妙味的上课氛围~
  • 自学的朋友,也可以通过这些资料提升 React 哦。
PS:文末有 react 视频彩蛋哦 ^_^

本周课程记录(12 月 2 日)

- 课程时间线 -

  • 10:00 准备上课,开始畅游在 React 的海洋吧~
  • 10:11 正式讲解内容 ^_^

    • state 使用细节
    • 复习好友列表
    • 一个组件的变化由组件内部的数据去控制
      • React 为我们提供了一个属性:state,state 是一个对象,我们可以在 state 中存储组件内部所使用的数据,通过调用组件内部的一个 setState 方法来修改 state 数据,该方法会重新渲染 UI;
    • 注意:

      • 如果要在构造函数中对 state 进行初始化

        • 如果一个组件使用了自己的构造函数,那么就需要在构造函数中调用父类的构造函数方法:super()

          • 扩展:“…” es6 扩展运算符

          • state 必须是一个对象

          • 我们不能直接给 state 进行赋值来触发 UI 的重新 render,需要使用 React 提供的一个方法来实现:setState()
          • setState 方法一般情况下是异步

          • 扩展:异步的表现形式

          • 在同一次操作中,多次 setState 是合并的

          • 在一些异步函数中(定时器,ajax,Promise),setState 是同步的
          • 我们还可以通过一个函数的方式去修改 state,可以处理更多业务逻辑上的问题
            • this.setState( (preState, prop) => { return { Show:! preState.show } })
          • preState:原 state 对象
          • props:组件的 props

10:50 一休哥(钟哥哥)嗨,休息,休息一会儿~


  • 11:09 组件通信

    • 子级传递数据给父级用事件,好友列表中,通过事件传递 index,告知父级需要更改第几个数据
  • 11:44 非受控组件

    • 例如:input、option、radio,他们的状态是不受 React 控制的,而是控件本身具有的,我们把这样的组件称为非受控组件
    • 非受控->受控组件的转化
      • 1、把状态绑定到非受控组件的 value、checked 上
      • 2、监听该组件的 onChange 事件;用 e.target 获取 input 上面的数据,通过 setState 设置数据给 state 内的数据
      • 3、如果只是希望把 state 内的初始数据给input,而不争夺控制权,可以赋值给defaultValue、defalutChecked 属性
  • 12:01

    • children
    • 被一个组件包含的内容,在组件内部可以通过 props.children 来获取this.props.children

12:25 下课,开启觅食补充能量时段,冲啊!!


  • 14:05 都吃饱没?吃饱上课~

    • 为了能够使组件默认值方便管理和维护,React 提供了一种方式设置组件的props
    • 在组件类下有一个属性,defaultProps,该属性是一个对象

      1. MButton.defalutProps = {
      2. type:’default
      3. }
  • 14:12
    • propTypes
    • 为了能够方便的去管理维护我们的属性类型验证规则,React 提供了一个prop-types来处理属性的类型验证和 defaultProps 类似,属性的取值验证规则就放置在组件类的propTypes属性下,该属性也是一个对象属性 key:value
      1. Button.propsTypes = {
      2. type:propsTyle.string
      3. }
  • 14:30

    • isRequired

      1. Button.propsTypes = {
      2. type:propsTyle.string.isRequired
      3. }

14:50 这一次的下课,是为了下一次更好的上课~


  • 15:10 生命周期

    • 一个组件从创建到销毁的过程,称为:生命周期

    • React 在组件的生命周期内的不用阶段会调用一些函数,我们把这些函数称为:生命周期函数

    • 组件的三个阶段:

      • Mounting:挂在阶段
      • Updating:更新阶段
      • Unmounting:卸载阶段
    • *Mounting 和 Unmounting 阶段在组件的整个生命周期中只会出现一次,而Updating 阶段会在组件每次更新中执行

    • 1、挂在阶段(组件创建到首次渲染到页面)

      • constructor()
        • 构造函数,在创建组件的时候调用一次
      • componentWillmount()
        • 在组件即将被挂载的时候调用一次
      • render()
        • 渲染
      • componentDidMount()
        • 在组件被挂载完成的时候调用一次,可以在这里使用 refs
    • 2、卸载阶段(组件从页面中移除)

      • compontentWillUnmount
        • 即将卸载
          • *没有卸载完成
    • 3、更新阶段

      • componentWillReceiveProps(nextProps)
        • 父组件的更新会触发子组件的这个函数
        • nextProps 父组件更新的时候带来的数据
      • shouldComponentUpdate(nextProps,nextState)
        • 是否需要重新渲染
        • Return false/true
      • componentWillUpdate(nextProps,nextState)
        • 即将更新
      • render
        • 渲染
      • componentDidUpdate(prevProps,PrevState)
        • 完成更新
  • 15:47

    • refs
    • 给元素添加一个 ref 属性,并且指定名称,通过 this.refs 名称,即可以拿到对象
      • 如果是原生 Dom,获取的是 Dom
      • 如果是组件,获取的是组件对象

16:10 学一会,休息一会儿,提高效率


  • 16:30

    • diff
    • 扩展:虚拟
      • React 渲染页面的时候,不是直接操作 Dom,而是利用了虚拟 Dom,它是一个对应真实 Dom 的 JS 对象,当 React 要 render 的时候,会生成一个对象树,新旧的对象树进行对比,进行有条件的更新
      • 优点:
        • 1、尽量保持一个稳定的 DOM 结构
        • 2、用 key 来稳定某些组件
    • 创建一个对象,该对象和页面中的元素有类似的一种结构上的对应
      • React.createElement( ‘div’, null, ‘按钮’ )
  • 16:57

    • key
    • diff 只会同时比较两个元素,某些时候会让一些不必要修改的元素重新修改,但你可以使用 key 值来声明某个稳定的组件;

美好的时光总是太快,学习的时间总觉得太少,咋又下课了呢o(╯□╰)o
说了这么多的内容都是文字,是不是干巴巴的总觉得少点什么?那就来点福利吧 ^_^

上周课后练习讲解相关视频

第一集:1-数据展示

第二集:2-state 切换


有想一起交流的小伙伴们,可以加我们的 React 技术交流群微信群哦~打开微信扫码入群,和我们一块来学习 React;

妙味 React 微信讨论群

(PS:群人数过多,请加小美微信邀请入群)

妙味 React 讨论群


相关推荐

>>上海《React+redux 高阶实战周末班》课程记录(一)

广而告之:

React+redux 高阶实战项目-周末班

  • 周末班彻底玩转 React “全家桶” 系列;
  • Npm + webpack + React + react-router-dom + Redux + react-redux;
  • 讲师手把手带领大家从 React 基础的 API,到 React 案例、电商购物车商品管理系统实战;
  • 全程录制视频、提供全部资料源码 PPT 下载;
    详情了解:http://miaov.com/index.php/news/newsDetail/nid/263

妙味(2017 年 12 月底)JavaScript 实体班 - 即将开课

详情了解:http://www.miaov.com/index.php/course/coursedetail/cid/34


课程咨询:

咨询QQ:2852509866

微信咨询:miaov-class

电话咨询:010-57269690

妙味网友
请登录后留言,请登录注册