React学习笔记4
遇到的问题
目前模板是自己任意定义的,样式不好控制 在组件设计时,可以把页面数据显示的地方,分割父子组件嵌套的结构,比如,商品数据显示列表,把组外层容器看成是父组件,里面是数据显示的渲染模板,看成是子组件
做数据交互
1.实现父子组件的分离---父组件请求data,子组件解析
2.实现在父组件中,生命周期函数中请求ajax,得到数据后,先存在父组件的state中,再把state传递给子组件的props
3.在子组件中解析和打印数据
4.在父组件中控制子组件的叠加,最后将叠加结果通过父组件渲染到页面中
Mixins
Mixins是React组件中提供出的一个属性
在开发中很多功能(JS函数构成的模块)存在共性,将公共函数抽取,通过Mixins来使用
首先将公共的函数提取出来,放在一个Object中,这些方法提取出来以后的类型也是Object方法类型
使用:在需要调用公共方法的组件中,通过mixins:[commonApis]把commonApis对象中的方法都挂载到该组件的原型链上
在组件中要是用这些方法,只需要onChange={this.checkInput}即可
React学习笔记4的更多相关文章
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记(六)事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记(五)State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
- React学习笔记 - Hello World
React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...
随机推荐
- innodb事务日志详解
首先看InnoDB的缓存和文件的关系图如下: InnoDB事务日志功能介绍 InnoDB使用日志来减少提交事务时的开销.因为日志中已经记录了事务,就无须在每个事务提交时把缓冲池的脏块刷新(flush) ...
- HDU 1166 敌兵布阵 树状数组小结(更新)
树状数组(Binary Indexed Tree(BIT), Fenwick Tree) 是一个查询和修改复杂度都为log(n)的数据结构.主要用于查询任意两位之间的所有 元素之和,但是每次只能修改一 ...
- 1131 Subway Map
题意:给出起点和终点,计算求出最短路径(最短路径即所经过的站点最少的),若最短路径不唯一,则选择其中换乘次数最少的一条线路. 思路:本题虽然也是求最短路径,但是此路径是不带权值的,路径长度即所经过的边 ...
- linux中内存使用,swap,cache,buffer的含义总结
首先介绍一下linux中内存是如何使用的.当有应用需要读写磁盘数据时,由系统把相关数据从磁盘读取到内存,如果物理内存不够,则把内存中的部分数据导入到磁盘,从而把磁盘的部分空间当作虚拟内存来使用,也称为 ...
- JAVA中跨平台分隔符
在Windows下的路径分隔符和Linux下的路径分隔符是不一样的,当直接使用绝对路径时,跨平台会暴出“No such file or diretory”的异常. 比如说要在temp目录下建立一个te ...
- Angular-cli新建项目目录结构详解
Angular-cli新建项目目录结构详解 在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文 ...
- csdn知识库
- NetCore Selfhost,IIShost,Windows Service Host详解(自宿主、宿主在IIS,宿主在Windows Service中)
第一部分.自托管 一.依赖.Net Core环境 修改 project.json 文件内容,增加发布时需要包含文件的配置内容(NetCore2.0版本不需要任何设置,NetCore2.0开始彻底放弃p ...
- 记录MongoDB常用查询
{$and:[{"}}]} // flag不等于1 也不等于0 {$or:[{"flag" :{ $ne:"1"}},{"flag" ...
- arm上sd卡热插拔问题的解决:
首先,保证sd卡驱动是完好,但是sd卡却无法热插拔或者无法识别. 刚开始我的板子上,sd是能够读取的,但是却不支持热插拔,看了几天sd驱动,找到了问题的原因,是驱动中硬件引脚相关设置的问题,具体根绝个 ...