# React

  • 声名式开发

命令式开发(jQuery)

  • 面向数据开发

  • 组件化编程

  • 单向数据流

  • 视图层框架

  • 函数式编程

(面向测试编程)

更好的做前端的自动化测试

2013年FaceBook推出的函数式编程框架

React Fiber(React 16版本)

# 基本内容

  • create-react-app
  • 组件化思维
  • jsx
  • 开发调试
  • 虚拟DOM
  • 生命周期
  • React-transition-group
  • Redux
  • Antd
  • UI、容器组件
  • 无状态组件
  • redux-thunk
  • redux-saga
  • style-components
  • Immuatable.js
  • redux-immutable
  • axios

# 环境搭建

Create-react-app

npx create-react-app

# 基础语法

React中必须引入react是因为需要编辑jsx

import React from 'react';

# JSX

{ /* js表达式 */}

html标签

<div></div>

  • JS中编写HTML,

  • Fragment (自定义组件) 用于占位符,实现最外层没有标签包裹的情况

import React, { Fragment } from 'react'

<Fragment><div>666</div></Fragment>

  • 自定义组件直接使用标签名,且首字母大写

import Input from 'antd'

<Input />

  • 注释

{/* 注释 */}

{
    // 注释
}
1
2
3

# 响应式设计

** immutable **

state 不允许我们做任何的改变


// ES6 return 简写
this.setState(() => ({
    toDoItem: value
}));

1
2
3
4
5
6

# 事件绑定

onClick = { this.handleClick }

# 组件拆分

# 组件化

  • UI组件和容器组件

  • 无状态组件

只有render函数的组件

# 组件传值

  • 父 =》子

属性传值

data = { data }

this.props.data

  • 子 =》父
    // 父组件中
    <Child onClick={this.handleClick} age={this.state.age} name={this.state.name}></Child>
1
2
    // 子组件触发
    <button onClick={this.props.onClick}>点击</button>
1
2

# props校验

// props的校验 ReduxItem.propTypes = { index: PropTypes.number, item: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) // 包含某一个 };

// 默认值 ReduxItem.defaultProps = { item: 'toDoItem' };

# 生命周期

生命周期函数指在某一个时刻组件会自动调用执行的函数

  • Initialization:初始化阶段。
  • Mounting: 挂载阶段。
  • Updation: 更新阶段。
  • Unmounting: 销毁阶段

# Mounting

componentWillMount() { console.log('componentWillMount----组件将要挂载到页面的时刻') }

componentDidMount() { console.log('componentDidMount----组件挂载完成的时刻执行') }

TIP

componentWillMount和componentDidMount这两个生命周期函数,只在页面刷新时执行一次, 而render函数是只要有state和props变化就会执行

# Redux

Redux = Reducer + Flux

数据层框架

# 规则

  • State 是只读的,唯一修改它的方式是 actions。
  • 更新的唯一方式:dispatch(action) -> reducer -> new state。
  • Reducer 函数必须是“纯”的 —— 不能修改它的参数,也不能有副作用(side effect)。
  • 只有store能够改变自己的内容

# 使用

  • createStore
  • store.dispatch
  • state.getState()
  • state.subscribe()

# react-redux使用

要做到这一点,要用到 react-redux 库的两样东西:

  • Provider 的组件

通过Provider包装整个应用,使得每个组件都能访问 Redux store

在 index.js 里,引入 Provider 然后用它把 App 的内容包装起来。store 会以 prop 形式传递。


import { Provider } from 'react-dedux';
import { store } from 'react-dedux';

const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // 调试redux用的
);
...

const App = () => {
    <Provider store = { store }>
        <App />
    </Provider>
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • connect 函数。

我们需要在我们的组件使用 connect 函数来访问 store

react-redux中的connect方法将store上的getState 和 dispatch 包装成组件的props。

connect() 接收四个参数,它们分别是 mapStateToProps , mapDispatchToProps, mergeProps 和 options 。

// 使用connect函数包装起来
const mapStateToProps = (state) => {
   console.log(state);
   return {
       toDoList: state.toDoList
   };
};

// 高阶函数(connect),传入一个组件,包装后继续返回这个组件
export default connect(mapStateToProps) (ToDoList);
1
2
3
4
5
6
7
8
9
10

# 进阶

actionTypes的拆分

将action.type常量化

# 原理进阶

# 动画

# 实战

  • 环境搭建

  • 组件

  • 登录校验

  • 上线1

# git checkout -b master

更新日期: 6/26/2020, 4:12:52 PM