React of Study

一.React 入门

JSX 简介

JSX，是一个 JavaScript 的语法扩展。

语法规则：

• 在 JSX 中嵌入表达式(区分表达式与代码块)

• 本身 JSX 也是一个表达式

• 虚拟 DOM ,一些标签的属性采用 “ 小驼峰法”

  const VDOM = <h1 style={{ fontSize: '26px' }}></h1>

• JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex;

  const VDOM = <h1 className="title"></h1>

• 。

React Developer Tools 调试工具

• Components 组件结构
• Profiler 性能监控

二.React 面向组件编程

1.基本理解和使用

• 函数式组件

  // 在 Babel 下 ，是严格模式
  // 函数式编程
  function MyComponent() {
    return <h2>我是函数式编程“简单组件”</h2>
  }
  ReactDOM.render(<MyComponent />, document.getElementById('test'))
  // <MyComponent/> react 帮你调用 MyComponent

• 类式组件

  // 在 Babel 下 ，是严格模式
  // 类式编程
  class MyComponent extends React.Component {
    render() {
      return (
        // “复杂组件” 有 State
        <h2>我是类式编程“复杂组件”</h2>
      )
    }
  }
  ReactDOM.render(<MyComponent />, document.getElementById('test'))
  // <MyComponent/> react 帮你 new MyComponent

2.组件实例的三大核心属性 1: State

理解：

1.state 是组件的状态机，通过更新组件的 state 来更新对应页面显示（重新渲染）

2.state 是对象形式的，多个 key-value 组合

值得注意：

1.组件中 render 方法中的 this 是组件实例的对象

2.组件自定义方法中，默认开启了 use strict，为 undefine,解决：

• bind()，强制绑定实例对象的 this

• 箭头函数

  3.setState()，组件的数据不可以直接更改。

​

3.组件实例的三大核心属性 2: props

理解：

1. 每个组件对象都会有 props 属性
2. 组件标签的所有属性都保存在 props 中
3. 用 props-type.js 对属性进行类型检测，必要性判断(React161 开始)

值得注意：

• 组件内部的 props 是只读属性的
• 有组件外向组件内传递变化的数据

4.组件实例的三大核心属性 3: refs 与事件处理

理解：

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

三种形式创建 ref:

1. 字符串形式的 ref

   input ref="input1" type="text"

2. 回调形式的 ref

   input ref={(a)=>this.input1 = a} type="text"

3. createRef 创建 ref 容器

   input2 = React.createRef()
   input ref={this.input1} type="text"

事件处理：

1. 通过 onXxx 属性指定事件处理函数（注意大小写）
   • React 使用的式自定义(合成)事件，而不是原生的 DOM 事件–更好兼容性
   • React 中的事件通过委托方式处理的（委托给组件最外层的元素）–更高的效率
2. 通过 event.target 得到发生事件的 DOM 对象

5.组件的生命周期：

旧版本的生命周期：

生命周期的三个阶段（旧）：

新版本生命周期（>v17.0.0）：

新增生命钩子（2 个）：

getDerivedStateFromProps：此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。

getSnapshotBeforeUpdate()：它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。

即将废弃生命钩子（三个）：均需在前面加上 UNSAFE_ (前缀)

• componentWillMount（）
• componentWillUpdate（）
• componentWillReceiveProps（）

6.虚拟 DOM，diff 算法：

三.React ajax

1.react 脚手架配置代理总结

方法一：

方法二：

注意从 http-proxy-middleware v2.0 开始使用 createProxyMiddleware 代替 proxy

2.xhr（axios） 和 fetch 的区别

xhr 与 fetch 是同一级别的 ！！！

1.传统的 xhr 请求

var xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.responseType = 'json'

xhr.onload = function () {
  console.log(xhr.response)
}

xhr.onerror = function () {
  console.log('Oops, error')
}

xhr.send()

2.未优化的 fetch 请求

fetch(url)
  .then(function (response) {
    return response.json()
  })
  .then(function (data) {
    console.log(data)
  })
  .catch(function (e) {
    console.log('Oops, error')
  })

3.优化后的 fetch 请求

try {
  let response = await fetch(url)
  let data = await response.json()
  console.log(data)
} catch (e) {
  console.log('Oops, error', e)
}
// 注：这段代码如果想运行，外面需要包一个 async function

3.PubSubJs 消息订阅 与 发布机制

使用过程：

导入 pubsub.js 模块

import PubSub from 'pubsub-js'

在需要 消息订阅 的组件，订阅

var token = PubSub.subscribe('MY TOPIC', (msg, data) => {})

在需要 发布 组件中，发布消息（msg:消息，data:数据）

PubSub.publish('MY TOPIC', 'hello world!')

消息订阅的组件待销毁后，取消订阅

PubSub.unsubscribe(token)

四.React 路由

1.Spa 理解

2.路由的理解

1. 什么是路由？

   

2. 路由分类

   • 后端路由

     

   • 前端路由

     方式一：H5 推出来的 history 模式(旧的浏览器不兼容)

     方式二：hash 值（锚点）

     

3.路由基本使用：

五.Redux 状态管理

1.redux 原理图

2.react-redux 原理图