# 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

← Vue 小程序 →