React 学习笔记(一)

时间 2019-12-05

标签 react 学习笔记栏目 React 繁體版

原文原文链接

在此记录一下学习`React` 的笔记..欢迎交流欢迎指正总之欢迎..

github地址 ⭐⭐⭐(懂我意思吧)html

react learning

一些关于react的概念

声明式开发
能够与其余框架并存
组件化开发
- class xxx extends Component
- 组件首字母大写且是单标签
- 组件是树状结构
- 父子通讯
  - 父传子直接在子组件上设置一个属性子组件this.props.接收
  - 子传父父给子传递一个function 而后子组件在自身调用传参给父组件从而传递值
单向数据流
- 父组件传递给子组件的值能够被使用但毫不能被子改变
视图层框架
- 只解决数据和页面渲染的问题
- 大点的项目要配合数据层框架好比..redux
函数式编程
- 面向测试开发更容易的进行前端自动化测试

零碎知识点

PropTypes & DefaultProps

PropTypes 对通讯间传入的值进行校验前端

先引入 import PropTypes from 'prop-types'
使用例如

TodoItem.propTypes = {
  // arrayOf 或者 是数字 或者是 字符串
  // arrayOf( PropTypes.number , PropTypes.string )
  //基本的一些类型
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  
  //
  optionalNode: PropTypes.node,

  // 一个 React 元素
  optionalElement: PropTypes.element,

  //也能够检查是否是一个类的实例
  optionalMessage: PropTypes.instanceOf(Message),

  //检查是否是其中确切的值之一
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  //也能够是这些类型其中之一
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 一个某种类型的数组
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 一个特定形式的对象
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  //isReauired修饰的值表示必须传入 不能为空 且必须是string(或者其余)
  optionalisStringReauired: PrpTypes.string.isRequired
  
  // 任何数据类型的值
  requiredAny: PropTypes.any.isRequired,


}
复制代码

defaultPropsnode

若是没传入设定一个默认值

TodoItem.defaultProps = {
  content: 'this is null'
}
复制代码

更多详情见文档 Typechecking With PropTypes Docreact

Props ,State 与 render 函数
- 当组件的state 或者 props进行改变的时候 render函数就会从新执行
- 当父组件的render函数被运行时它的子组件的render都将被从新运行
虚拟DOM (本质就是一个js对象用来描述真实DOM)
- react利用虚拟DOM渲染的流程
  - 👇 state数据
  - 👇 jsx模板
  - 👇 state数据和jsx模板结合先生成一个虚拟DOM
```
React.createElement(tagName,{attr}, content)
复制代码
```
  - 👇 用虚拟DOM生成真实DOM来显示
  - 👇 state数据改变
  - 👇 数据 + 模板从新渲染生成新的虚拟DOM 并与以前的虚拟DOM作对比找出改变的那一部分是两个js对象之间的对比
  - 👇 找到变化后直接操做DOM 更新
- 优势:
  1. 性能提高
  2. 跨端得以实现 RN..
- 虚拟DOM中的Diff算法 (different, 找差别算法)
  - 虚拟DOM树是同层比较的
  - key值是对比中的一个标识因此key值要保持稳定尽可能不用index做为key 用item
用ref来操做DOM (避免使用..由于推荐数据驱动的方式不操做DOM)
- e.target 也能够获取到
- 给相应的元素添加 ref="xxx" 的属性, 而后this.refs.xxx获取到DOM元素
- ref={ (xxx) =>{ this.xxx = xxx } } 相应的 this.xxx就是那个DOM元素了
setState()
- 是一个'异步'操做立马执行完以后React会对state的全部改变进行合并处理以后才会从新去计算新的虚拟DOM 再根据最新的虚拟DOM去从新渲染真实DOM
  可是这个异步是伪异步只是维护了一个updataQueue 并非说自己就是异步代码实现的
- 第二个参数是一个回调函数, 即视图更新完毕后调用就会避免某些值获取不到的状况
React的生命周期函数
- 在某一个时刻组件会自动执行的函数
- Initialization (初始化一些数据)
  - constructor 初始化state和props 以及一些函数this指向问题
    constructor 不是React独有的是es6 class语法这里完美契合了React
- Mounting (挂载时的生命周期 ,注意是第一次挂载时以后数据更新,虚拟DOM更新后的挂载不算)
  - componentWillMount在组件即将被挂载到页面的时刻自动执行 (尚未被挂载到页面上)
  - render 此时建立虚拟dom,进行diff算法,更新dom树都在此进行此时就不能更改state了
  - componentDidMount 组件被挂载了以后执行
- Updation (组件更新的流程)
  - props发生变化
    - props 发生变化时最开始会有一个
      componentWillReceiveProps 一个组件从父组件接收参数, 只要父组件的render函数被从新执行了子组件的中国生命周期函数就会被执行
  - 共同的生命周期函数
    - shouldComponentUpdate 组件被更新以前自动执行
      须要return一个布尔值
      若是return true 组件会被更新
      若是return false 组件不更新且以后的生命周期函数都不执行了
      若是这个组件第一次存在于父组件中不会被执行
      若是这个组件以前已经存在于父组件中才会执行
    - componentWillUpdate 组件更新以前会被自动执行可是在shouldComponentUpdate 以后执行若是 shouldComponentUpdatereturn false 就不执行了
    - render 知道要数据更新了因此 render 函数又会自动执行更新组件
    - componentDidUpdate 组件更新完毕以后执行
- Unmounting
  - componentWillUnmount 当组件即将被销毁时执行此时还未被移除
- 网上扣了张图..侵删..
  须要注意的是图中最开始的两个函数在使用es6 constructor时就不须要了

悄咪咪说一下今天是世界微笑日(orz),祝你们快乐😀git

React 学习笔记(一)

在此记录一下学习React 的笔记..欢迎交流 欢迎指正 总之欢迎..

react learning

一些关于react的概念

零碎知识点

在此记录一下学习`React` 的笔记..欢迎交流欢迎指正总之欢迎..