react学习笔记

发表于 | 分类于

react学习笔记

redux

Redux 莞式教程 中的一个总结：

  • store 由 Redux 的 createStore(reducer) 生成

  • state 通过 store.getState() 获取，本质上一般是一个存储着整个应用状态的对象

  • action 本质上是一个包含 type 属性的普通对象，由 Action Creator (函数) 产生

  • 改变 state 必须 dispatch 一个 action

  • reducer 本质上是根据 action.type 来更新 state 并返回 nextState 的函数

  • reducer 必须返回值，否则 nextState 即为 undefined

  • 实际上，state 就是所有 reducer 返回值的汇总

redux

Redux 进阶教程

通过三张图了解Redux中的重要概念

combineReducers 将多个模块reducer合并在一块，把 state 分而治之，极大减轻开发与维护的难度

bindActionCreators ，合并 Action Creator 和 dispatch(action) 操作，实现自动 dispatch

Middleware 主要的作用就是处理Action，Redux中的Action必须是一个plain object。但是为了实现异步的Action或其他功能，这个Action可能就是一个函数，或者是一个promise对象。这是就需要中间件帮助来处理这种特殊的Action了。

Redux中常用的中间件：

redux-thunk：action可以是一个函数，用来发起异步请求。
redux-promise：action可以是一个promise对象，用来更优雅的进行异步操作。
redux-logger：action就是一个标准的plain object，用来记录action和nextState的。

react-redux

React-Redux 的用法

react-redux中提供了两个重要功能模块Provider和connect，这两个模块保证了react和redux之间的通信

React Router

阮一峰——React Router 使用教程

生命周期

  • 初始化阶段

getDefaultProps:获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,)

getInitialState:获取每个实例的初始化状态（每个实例自己维护）

componentWillMount：组件即将被装载、渲染到页面上（render之前最好一次修改状态的机会）

render:组件在这里生成虚拟的DOM节点（只能访问this.props和this.state；只有一个顶层组件，也就是说render返回值值职能是一个组件；不允许修改状态和DOM输出）

componentDidMount:组件真正在被装载之后，可以修改DOM

  • 运行中状态

componentWillReceiveProps:组件将要接收到属性的时候调用（赶在父组件修改真正发生之前,可以修改属性和状态）

shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了）

componentWillUpdate:不能修改属性和状态

componentDidUpdate:可以修改DOM

  • 销毁阶段

componentWillUnmount:开发者需要来销毁（组件真正删除之前调用，比如计时器和事件监听器）

组件

组件创建的两种方式：

函数式组件（无状态式组件）

const Welcome = (props) => {
    return <h2>Hello, {props.name}</h2>
}

它有以下几处特点：

  • 组件不会被实例化，整体渲染性能得到提升
    因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。

  • 组件不能访问this对象
    无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件

  • 组件无法访问生命周期的方法
    因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。

  • 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

类组件

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

类组件拥有状态(state)及生命周期，能够更好的控制组件的表现。

显示 Gitment 评论