《React与Redux开发实例精解》读书笔记

第五章 JSX语法

  • class属性改为className for属性改为htmlFor
  • jsx中javascript表达式必须要有返回值,使用三元操作符
  • 所有的标签必须闭合 input img等
  • react声明组件时,组件名称第一个字母必须大写
  • 解析html代码 dangerouslySetInnerHTML={{ __html:htmlString }}
  • jsx中内联样式通过style属性来定义,驼峰命名法

第六章 React的数据载体:state props与context

state称为内部状态或局部状态,

props与context则用于在组件间传递数据,props仅支持逐层传递,而context则能够跨级传递,只要在一个组件中定义了context,这个组件里面的子组件不管跨多少级都可以访问到context中的数据,react-redux的provider组件就使用了context来传递store

第七章 reactElement与组件实例

组件是一个函数或类,它决定了如何把数据变为视图

ReactElement只是一个普通的对象,它描述了组件实例或DOM节点

组件实例是组件类的实例化对象

生命周期

  1. constructor()

    执行时间:组件被加载前最先调用,并且仅调用一次

    作用:定义状态机变量

    注意:第一个语句必须是super(props)

  2. componentWillMount()

    执行时间:组件初始渲染(render()被调用前)前调用,并且仅调用一次

    作用:如果在这个函数中调用setState改变某些状态机,react会等待setState完成后再渲染 组件

    注意:子组件也有componentWillMount函数,在父组件的该函数调用后再被调用

  3. render()

    执行时间:componentWillMount之后,componentDidMount之前,

    作用:渲染挂载组件

    触发条件:(1)初始化加载页面(2)状态机改变setState ( 3 ) 接收到新的props(父组件更新)

    注意:组件所必不可少的核心函数;不能在该函数中修改状态机state

  4. componentDidMount()

    执行时间:render之后被调用,并且仅调用一次

    作用:渲染挂载组件;可以使用refs(备注:React支持一个特殊的属性,你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记,可以方便的定位的这个组件实例。)

    注意:子组件也有该函数,在父组件的该函数调用前被调用;如果在该函数中修改某些状态机state,会重新渲染render组件,所以有些组件为减少渲染次数,可以将某些修改状态机的操作放在componentWillMount函数中;

    如果需要在程序启动显示初始化页面后从网路获取数据,可以将网络请求代码放在该函数中

  5. componentWillReceiveProps(nextProps)

    执行时间:组件渲染后,当组件接收到新的props时被调用;这个函数接收一个object参数(新的props);props是父组件传递给子组件的。父组件发生render的时候子组件就会调用

    作用:渲染挂载组件;可以使用refs(备注:React支持一个特殊的属性,你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记,可以方便的定位的这个组件实例。)

    注意:react初次渲染时,该函数并不会被触发,因此有时该函数需要和componentWillMount或componentDidMount组合使用;使用该函数一定要加nextProps参数

  6. shouldComponentUpdate(nextProps, nextState)

    执行时间:组件挂载后(即执行完render),接收到新的state或props时被调用,即每次执行setState都会执行该函数,来判断是否重新render组件,默认返回true;接收两个参数:第一个是心的props,第二个是新的state。

    作用:如果有些变化不需要重新render组件,可以在该函数中阻拦

    注意:该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会

  7. componentWillUpdate()

    执行时间:在接收到新的props 或者 state,重新渲染之前立刻调用,在初始化渲染的时候该方法不会被调用

    作用:为即将发生的重新渲染做一些准备工作

    注意:不能再该函数中通过this.setstate再次改变状态机,如果需要,则在componentWillReceiveProps函数中改变

  8. componentDidUpdate()

    执行时间:重新渲染后调用,在初始化渲染的时候该方法不会被调用

    作用:使用该方法可以在组件更新之后操作DOM 元素

  9. componentWillUnmount()

    执行时间:组件被卸载前调用,

    作用:在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

React组件中this
  • constructor(),render(),componentDidMount(),componentDidUpdate()等其他生命周期函数中的this都是组件实例
  • 其他地方的this都与当前上下文有关,因此在render输出的reactElemnt中调用其他自定义函数需要绑定this,当然也可以使用箭头函数

第八章 初识Redux

action是一个普通对象,表示将要执行的动作,例如{type:'increment'}

reducer描述了action如何把state转变成下一个state

store是个全局对象,将action和reducer以及stte联系在一起

store有以下职能:

  • 维持应用的state
  • 提供getState()方法获取state
  • 提供dispatch(action)方法更新state
  • 提供subscribe(listener)注册监听器

第九章 action创建函数与ReduxThunk中间件

reduxThunk中间件可以让action创建函数先不返回action对象,而是返回一个函数,通过这个函数延迟dispatch或者只在满足指定条件的情况下dispatch

import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk'; const store = createStore(counter,applyMiddleware(thunk));

第十一章 使用react-redux链接

在所有组件的顶层使用Provider组件给整个程序提供store

ReactDOM.render(
<Provider store={store}>
...
</Peovider>,rootEl);

使用connect()将state和action创建函数绑定到组件中

export default connect(
state=>({counter:state.counter}),//将state.counter传递给组件的counter属性
ActionCreators//是所有action创建函数的集合,同时为每个action创建函数隐式绑定了dispatch方法,
//因此可以直接通过props调用这个action创建函数
)(Counter);

容器组件(Container)和展示组件(Components)

展示组件 容器组件
作用 描述如何展现(骨架、样式) 描述如何运行(数据获取、状态更新)
直接使用 Redux
数据来源 props 监听 Redux state
数据修改 从 props 调用回调函数 向 Redux 派发 actions
调用方式 手动 通常由 React Redux 生成
上一篇:一分钟制作U盘版BT3 - 有图滴儿 bt3破解教程


下一篇:mysql之——存储过程 + 游标 + 事务