Reac、React-router、redux学习笔记

女爷i 2021-09-23 10:28 306阅读 0赞

# 1. React入门 #

## 1.1. React基本认识
    ## 1.2. React基本使用
    ## 1.3. JSX的理解和使用
    ## 1.4. 模块与模块化, 组件与组件化的理解

# 2. React组件化编程 #

## 2.1. 组件的定义与使用
    ## 2.2. 组件的3大属性: state, props, refs
    ## 2.3. 组件中的事件处理
    ## 2.4. 组件的组合使用
    ## 2.5. 组件收集表单数据
    ## 2.6. 组件的生命周期
    ## 2.7. 虚拟DOM与DOM diff算法
    ## 2.8. 命令式编程与声明式编程

# 1. React入门 #

## 1.1. React的基本认识 ##

1). Facebook开源的一个js库
    2). 一个用来动态构建用户界面的js库
    3). React的特点
        Declarative(声明式编码)
        Component-Based(组件化编码)
        Learn Once, Write Anywhere(支持客户端与服务器渲染)
        高效
        单向数据流
    4). React高效的原因
        虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数) 
        高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)

## 1.2. React的基本使用 ##

1). 导入相关js库文件(react.js, react-dom.js, babel.min.js)
    2). 编码:

<div id="container"></div>
        <script type="text/babel">
            var aa = 123
            var bb = 'test'
            ReactDOM.render(<h1 id={bb}>{aa}</h1>, containerDOM)
        </script>

## 1.3. JSX的理解和使用 ##

1). 理解
        * 全称: JavaScript XML
        * react定义的一种类似于XML的JS扩展语法: XML+JS
        * 作用: 用来创建react虚拟DOM(元素)对象
    2). 编码相关
        * js中直接可以套标签, 但标签要套js需要放在{}中
        * 在解析显示js数组时, 会自动遍历显示
        * 把数据的数组转换为标签的数组:

var liArr = dataArr.map(function(item, index){
                return <li key={index}>{item}</li>
            })

3). 注意:
        * 标签必须有结束
        * 标签的class属性必须改为className属性
        * 标签的style属性值必须为: {
      {color:'red', width:12}}

## 1.4. 几个重要概念理解 ##

### 1). 模块与组件 ###

1. 模块:
        理解: 向外提供特定功能的js程序, 一般就是一个js文件
        为什么: js代码更多更复杂
        作用: 复用js, 简化js的编写, 提高js运行效率
    2. 组件: 
        理解: 用来实现特定功能效果的代码集合(html/css/js)
        为什么: 一个界面的功能太复杂了
        作用: 复用编码, 简化项目界面编码, 提高运行效率

### 2). 模块化与组件化 ###

1. 模块化:
        当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
    2. 组件化:
        当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

# 2. react组件化开发 #

## 2.1. 基本理解和使用 ##

1). 自定义的标签: 组件类(函数)/标签
    2). 创建组件类

//方式1: 无状态函数(简单组件, 推荐使用)
        function MyComponent1(props) {
            return <h1>自定义组件标题11111</h1>
        }
        //方式2: ES6类语法(复杂组件, 推荐使用)
        class MyComponent3 extends React.Component {
            render () {
              return <h1>自定义组件标题33333</h1>
            }
        }

3). 渲染组件标签

ReactDOM.render(<MyComp />,  cotainerEle)

4). ReactDOM.render()渲染组件标签的基本流程
        React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象
        将虚拟DOM并解析为真实DOM
        插入到指定的页面元素内部

## 2.2. 组件的3大属性: state ##

1. 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示
    2. 初始化指定:

constructor() {
          super()
          this.state = {
            stateName1 : stateValue1,
            stateName2 : stateValue2
          }
        }

3. 读取显示:

this.state.stateName1

4. 更新状态-->更新界面 :

this.setState({stateName1 : newValue})

## 2.2. 组件的3大属性: props ##

所有组件标签的属性的集合对象
    给标签指定属性, 保存外部数据(可能是一个function)
    在组件内部读取属性: this.props.propertyName
    作用: 从目标组件外部向组件内部传递数据
    对props中的属性值进行类型限制和必要性限制

Person.propTypes = {
            name: React.PropTypes.string.isRequired,
            age: React.PropTypes.number.isRequired
        }

扩展属性: 将对象的所有属性通过props传递

## 2.2. 组件的3大属性: refs ##

组件内包含ref属性的标签元素的集合对象
    给操作目标标签指定ref属性, 打一个标识
    在组件内部获得标签对象: this.refs.refName(只是得到了标签元素对象)
    作用: 找到组件内部的真实dom元素对象, 进而操作它

## 2.3. 组件中的事件处理 ##

1. 给标签添加属性: onXxx={this.eventHandler}
    2. 在组件中添加事件处理方法
        eventHandler(event) {
                    
        }
    3. 使自定义方法中的this为组件对象
        在constructor()中bind(this)
        使用箭头函数定义方法(ES6模块化编码时才能使用)
    4. 事件监听
        绑定事件监听
            事件名
            回调函数
        触发事件
            用户对对应的界面做对应的操作
            编码

## 2.4. 组件的组合使用 ##

1)拆分组件: 拆分界面,抽取组件
    2)实现静态组件: 使用组件实现静态页面效果
    3)实现动态组件
        ①　动态显示初始化数据
        ②　交互功能(从绑定事件监听开始)

## 2.5. 组件收集表单数据 ##

受控组件
    非受控组件

## 2.6. 组件的生命周期 ##

1. 组件的三个生命周期状态:
        Mount：插入真实 DOM
        Update：被重新渲染
        Unmount：被移出真实 DOM
    2. 生命周期流程:

* 第一次初始化显示: ReactDOM.render(<Xxx/>, containDom)
            constructor()
            componentWillMount() : 将要插入回调
            render() : 用于插入虚拟DOM回调
            componentDidMount() : 已经插入回调
        * 每次更新state: this.setState({})
            componentWillReceiveProps(): 接收父组件新的属性
            componentWillUpdate() : 将要更新回调
            render() : 更新(重新渲染)
            componentDidUpdate() : 已经更新回调
        * 删除组件: ReactDOM.unmountComponentAtNode(div): 移除组件
            componentWillUnmount() : 组件将要被移除回调

3. 常用的方法

render(): 必须重写, 返回一个自定义的虚拟DOM
        constructor(): 初始化状态, 绑定this(可以箭头函数代替)
        componentDidMount() : 只执行一次, 已经在dom树中, 适合启动/设置一些监听

## 2.7. 虚拟DOM与DOM diff算法 ##

### 1). 虚拟DOM是什么? ###

一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的)
    虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应
    如果只是更新虚拟DOM, 页面是不会重绘的

### 2). Virtual DOM 算法的基本步骤 ###

用JS对象树表示DOM树的结构；然后用这个树构建一个真正的DOM树插到文档当中
    当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
    把差异应用到真实DOM树上，视图就更新了

### 3). 进一步理解 ###

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
    可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

## 2.8. 命令式编程与声明式编程 ##

声明式编程
        只关注做什么, 而不关注怎么做(流程),  类似于填空题
    命令式编程
        要关注做什么和怎么做(流程), 类似于问答题

var arr = [1, 3, 5, 7]
    // 需求: 得到一个新的数组, 数组中每个元素都比arr中对应的元素大10: [11, 13, 15, 17]
    // 命令式编程
    var arr2 = []
    for(var i =0;i<arr.length;i++) {
        arr2.push(arr[i]+10)
    }
    console.log(arr2)
    // 声明式编程
    var arr3 = arr.map(function(item){
        return item +10
    })
    // 声明式编程是建立命令式编程的基础上
    
    // 数组中常见声明式方法
        map() / forEach() / find() / findIndex()

# 1. 使用React脚手架创建一个React应用 #

## 1). react脚手架 ##

1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
        * 包含了所有需要的配置
        * 指定好了所有的依赖
        * 可以直接安装/编译/运行一个简单效果
    2. react提供了一个专门用于创建react项目的脚手架库: create-react-app
    3. 项目的整体技术架构为: react + webpack + es6  + babel + eslint

## 2). 创建项目并启动 ##

npm install -g create-react-app
    create-react-app react-app
    cd react-app
    npm start

## 3). 使用脚手架开发的项目的特点 ##

模块化: js是一个一个模块编写的
    组件化: 界面是由多个组件组合编写实现的
    工程化: 实现了自动构建/运行/打包的项目

## 4). 组件化编写项目的流程 ##

拆分组件
    实现静态组件--->静态页面
    实现动态组件
        动态显示初始化数据
        交互

# 2. app1: 实现一个评论管理功能 #

## 1). 拆分组件: ##

应用组件: App
    添加评论组件: CommentAdd
    评论项组件: CommentItem
    评论列表组件: CommentList

## 2). 确定组件的state和props: ##

App: 
        * state: comments/array
    CommentAdd
        * state: username/string, content/string
        * props: add/func
    commentList
        * props: comments/array, delete/func
    CommentItem
        * props: comment/object, delete/func, index/number

## 3). 编写静态组件 ##

拆分页面
    拆分css

## 4). 实现动态组件 ##

1. 动态展示初始化数据
      * 初始化状态数据
      * 传递属性数据
    2. 响应用户操作, 更新组件界面
      * 绑定事件监听, 并处理
      * 更新state

# 3. app2: 实现github用户搜索功能 #

## 1). react应用中的ajax请求 ##

axios: 包装XMLHttpRequest对象, promise风格, 支持浏览端/node服务器端
    fetch: 浏览器内置语法, promise风格, 老浏览器不支持, 可以引入fetch.js兼容包

## 2). 拆分组件 ##

App
        * state: searchName/string
    Search
        * props: setSearchName/func
    List
        * props: searchName/string
        * state: firstView/bool, loading/bool, users/array, errMsg/string

## 3). 编写组件 ##

编写静态组件
    编写动态组件
        componentWillReceiveProps(nextProps): 监视接收到新的props, 发送ajax
        使用axios库发送ajax请求

# 4. 组件间通信总结 #

## 1). 方式一: 通过props传递 ##

共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
    一般数据-->父组件传递数据给子组件-->子组件读取数据
    函数数据-->子组件传递数据给父组件-->子组件调用函数
    问题: 多层传递属性麻烦, 兄弟组件通信不方便

## 2). 方式二: 使用消息订阅(subscribe)-发布(publish)机制: 自定义事件机制 ##

## 3). 事件监听理解 ##

1. DOM事件
        * 绑定事件监听
            * 事件名(类型): 只有有限的几个, 不能随便写
            * 回调函数
        * 用户操作触发事件(event)
            * 事件名(类型)
            * 数据
    2. 自定义事件
        * 绑定事件监听
            * 事件名(类型): 任意
            * 回调函数: 通过形参接收数据, 在函数体处理事件
        * 触发事件(编码)
            * 事件名(类型): 与绑定的事件监听的事件名一致
            * 数据: 会自动传递给回调函数

# 5. ES6新语法总结 #

定义变量/常量: const/let
    解构赋值: let {a, b} = this.props   import {aa} from 'xxx'
    对象的简洁表达: {a, b}
    箭头函数: 
        组件的自定义方法: xxx = () => {}
        map/filter的回调方法: (item, index) => {}
        优点:
            * 简洁
            * 没有自己的this,使用引用this查找的是外部this
    扩展运算符: ...
        拆解对象:  const MyProps = {}, <Xxx {...MyProps}>
    类: class/extends/constructor/super
    ES6模块化: export default | import

# 6. 项目打包运行 #

npm run build  //生成打包文件
    npm install -g serve  //全局下载服务器包
    serve build  //通过服务器命令运行打包项目
    访问: http://localhost:5000  //浏览器访问

# 1. redux要点 #

1. redux理解
    2. redux相关API
    3. redux核心概念(3个)
    4. redux工作流程
    5. 使用redux及相关库编码

\#1. redux理解 什么?: redux是专门做状态管理的独立第3方库, 不是react插件 作用?: 对应用中状态进行集中式的管理(写/读) 开发: 与react-redux, redux-thunk等插件配合使用

# 2. redux相关API #

redux中包含: createStore(), applyMiddleware(), combineReducers()
    store对象: getState(), dispatch(), subscribe()
    react-redux: <Provider>, connect()()

# 3. redux核心概念(3个) #

action: 
        默认是对象(同步action), {type: 'xxx', data: value}, 需要通过对应的actionCreator产生, 
        它的值也可以是函数(异步action), 需要引入redux-thunk才可以
    reducer
        根据老的state和指定的action, 返回一个新的state
        不能修改老的state
    store
        redux最核心的管理对象
        内部管理着: state和reducer
        提供方法: getState(), dispatch(action), subscribe(listener)

# 4. redux工作流程 #

![format_png][]

# 5. 使用redux及相关库编码 #

需要引入的库: 
        redux
        react-redux
        redux-thunk
        redux-devtools-extension(这个只在开发时需要)
    redux文件夹: 
        action-types.js
        actions.js
        reducers.js
        store.js
    组件分2类: 
        ui组件(components): 不使用redux相关PAI
        容器组件(containers): 使用redux相关API

[format_png]: /images/20210923/19480438210b4b84acbf710cb96f1c59.png