《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节点
组件实例是组件类的实例化对象
生命周期
constructor()
执行时间:组件被加载前最先调用,并且仅调用一次
作用:定义状态机变量
注意:第一个语句必须是super(props)componentWillMount()
执行时间:组件初始渲染(render()被调用前)前调用,并且仅调用一次
作用:如果在这个函数中调用setState改变某些状态机,react会等待setState完成后再渲染 组件
注意:子组件也有componentWillMount函数,在父组件的该函数调用后再被调用render()
执行时间:componentWillMount之后,componentDidMount之前,
作用:渲染挂载组件
触发条件:(1)初始化加载页面(2)状态机改变setState ( 3 ) 接收到新的props(父组件更新)
注意:组件所必不可少的核心函数;不能在该函数中修改状态机statecomponentDidMount()
执行时间:render之后被调用,并且仅调用一次
作用:渲染挂载组件;可以使用refs(备注:React支持一个特殊的属性,你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记,可以方便的定位的这个组件实例。)
注意:子组件也有该函数,在父组件的该函数调用前被调用;如果在该函数中修改某些状态机state,会重新渲染render组件,所以有些组件为减少渲染次数,可以将某些修改状态机的操作放在componentWillMount函数中;
如果需要在程序启动显示初始化页面后从网路获取数据,可以将网络请求代码放在该函数中componentWillReceiveProps(nextProps)
执行时间:组件渲染后,当组件接收到新的props时被调用;这个函数接收一个object参数(新的props);props是父组件传递给子组件的。父组件发生render的时候子组件就会调用
作用:渲染挂载组件;可以使用refs(备注:React支持一个特殊的属性,你可以将这个属性加在任何通过render()返回的组件中。这也就是说对render()返回的组件进行一个标记,可以方便的定位的这个组件实例。)
注意:react初次渲染时,该函数并不会被触发,因此有时该函数需要和componentWillMount或componentDidMount组合使用;使用该函数一定要加nextProps参数shouldComponentUpdate(nextProps, nextState)
执行时间:组件挂载后(即执行完render),接收到新的state或props时被调用,即每次执行setState都会执行该函数,来判断是否重新render组件,默认返回true;接收两个参数:第一个是心的props,第二个是新的state。
作用:如果有些变化不需要重新render组件,可以在该函数中阻拦
注意:该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会componentWillUpdate()
执行时间:在接收到新的props 或者 state,重新渲染之前立刻调用,在初始化渲染的时候该方法不会被调用
作用:为即将发生的重新渲染做一些准备工作
注意:不能再该函数中通过this.setstate再次改变状态机,如果需要,则在componentWillReceiveProps函数中改变componentDidUpdate()
执行时间:重新渲染后调用,在初始化渲染的时候该方法不会被调用
作用:使用该方法可以在组件更新之后操作DOM 元素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 生成 |
《React与Redux开发实例精解》读书笔记的更多相关文章
- csapp读书笔记-并发编程
这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...
- CSAPP 读书笔记 - 2.31练习题
根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1) 属于第一种情况 sum = x ...
- CSAPP读书笔记--第八章 异常控制流
第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...
- CSAPP 并发编程读书笔记
CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...
- 读书笔记汇总 - SQL必知必会(第4版)
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
- 读书笔记--SQL必知必会18--视图
读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...
- 《C#本质论》读书笔记(18)多线程处理
.NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...
- C#温故知新:《C#图解教程》读书笔记系列
一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...
- C#刨根究底:《你必须知道的.NET》读书笔记系列
一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...
- Web高级征程:《大型网站技术架构》读书笔记系列
一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...
随机推荐
- leetcode — rotate-list
/** * Source : https://oj.leetcode.com/problems/rotate-list/ * * * Given a list, rotate the list to ...
- linux 命令 — cut
cut 以列的方式格式化输出 依赖定界符 cut -f field_list filename 以默认定界符(tab,制表符)分割文件的列,输出指定的列field_list,field_list由列号 ...
- 你不知道的Node.js性能优化,读了之后水平直线上升
本文由云+社区发表 "当我第一次知道要这篇文章的时候,其实我是拒绝的,因为我觉得,你不能叫我写马上就写,我要有干货才行,写一些老生常谈的然后加上好多特技,那个 Node.js 性能啊好像 D ...
- Go基础系列:函数(2)——回调函数和闭包
回调函数和闭包 当函数具备以下两种特性的时候,就可以称之为高阶函数(high order functions): 函数可以作为另一个函数的参数(典型用法是回调函数) 函数可以返回另一个函数,即让另一个 ...
- Go Web:Cookie
Cookie用来解决http协议无状态的问题. 首先,在服务端生成Cookie,然后在http响应header中设置Set-Cookie字段,客户端会读取到Set-Cookie字段后,会将cookie ...
- 翻译:select into outfile(已提交到MariaDB官方手册)
本文为mariadb官方手册:SELECT INTO OUTFILE的译文. 原文:https://mariadb.com/kb/en/select-into-outfile/ 我提交到MariaDB ...
- SQLite占用资源少原因
本篇承接上篇SQLite详解的下篇,介绍SQLIte为什么占用资源少的原因?本文主要参考https://blog.csdn.net/hanyingzhong/article/details/46400 ...
- Docker虚拟机实战
安装Docker虚拟机 ◆ 先更新yum软件管理器,然后再安装Docker #更新yum软件管理器 yum -y update #安装Docker yum install -y ...
- 基于mvc三层架构和ajax技术实现最简单的文件上传
前台页面提交文件 <!DOCTYPE html> <html><head> <meta name="viewport" content=& ...
- 操作失败: 无法更改关系,因为一个或多个外键属性不可以为 null
报错:操作失败: 无法更改关系,因为一个或多个外键属性不可以为 null . 同时修改主表和从表的数据,想用EF主表T_ReviewPlan中某个对象item删除item对应的从表T_ReviewS ...