(三)React基础
3-1 使用React编写TodoList功能
import { Fragment} from ‘react’
Fragment是占位符 用于替代最外层div元素,
防止生成的元素会有两层div嵌套这种情况出现
(图片中这里rootdiv 下面就没有多余的那一层div了)
3-2 react中的事件绑定
this.func.bind(this)
3-3 实现TodoList新增删除功能
immutable:
reacnt 要求 state 不允许我们做任何改变
如果要改,就拷贝出一份副本,然后再去改
3-4 jsx语法补充
1.组件必须大写开头
2.注释{ /* */ }
{
//
}
3.使用className 不要使用class
4.取消标签转义 (☹会有xss攻击的可能)
原写法
之后:
5.label
原始的写法是给一个id 然后label标签里面给一个for属性
现在在react中,希望使用htmlFor
3-5 拆分组件与组件传值
1.通过属性父组件给子组件传值
2.子组件如何调用父组件方法修改父组件的内容
答:父组件把方法通过props传给子组件就行, 当然要注意 如果是处理父组件的内容要先bind(this) 绑定父组件的this 然后再进行相关操作。
3-6 TodoList代码优化
1.bind写在顶部
2.
同步的setState
异步的setState
更靠谱的异步setState:
3-7 围绕React衍生出的思考
声明式开发 React 面向数据编程 只要把数据构建好就行 可以节约掉大量DOM操作代码
*命令式开发(直接操作DOM jquery) 60%-70%代码都是在做DOM操作
可以与其他框架并存
组件化
单项数据流
父组件可以向子组件传值 但是子组件只能去使用这个值 不能去改变这个值。
因为react认为 如果多个子组件修改了数据 引起了数据的变化 不好判断到底是哪里触发了变化,对于代码调试是非常不方便的。
视图层框架
问题:
如果紫色组件想和右上角的组件通信应该怎么办,如果一层一层的向上传再向下传就太复杂了。
React只把自己定位为一个视图层的框架,对于组件之间怎么传值,交给了其他框架来做。
(三)React基础的更多相关文章
- react基础(1)
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- react基础(2)
react基础(1):介绍了如何创建项目,总结了JSX.组件.样式.事件.state.props.refs.map循环,另外还讲了mock数据和ajax 还是用 react基础1 里创建的项目继续写案 ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- Swift语言指南(三)--语言基础之整数和浮点数
原文:Swift语言指南(三)--语言基础之整数和浮点数 整数 整数指没有小数的整数,如42,-23.整数可以是有符号的(正数,零,负数),也可以是无符号的(正数,零). Swift提供了8,16,3 ...
- App架构师实践指南三之基础组件
App架构师实践指南三之基础组件 1.基础组件库随着时间的增长,代码量的逐渐积累,新旧项目之间有太多可以服用的代码.下面是整理的公共代码库. 2.关于加密密钥的保护以及网络传输安全是移动应用安全最关键 ...
- 三. Python基础(3)--语法
三. Python基础(3)--语法 1. 字符串格式化的知识补充 tpl = "我是%s,年龄%d,学习进度100%" %('Arroz',18) print(tpl) # 会提 ...
- 《Java程序设计》第三章-基础语法
20145221<Java程序设计>第三章-基础语法 总结 教材学习内容总结 类型.变量与运算符 类型 Java可区分为基本类型(Primitive Type)和类类型(Class Typ ...
- react基础语法(五) state和props区别和使用
props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- react基础用法一(在标签中渲染元素)
react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...
随机推荐
- php方法-------将汉字转为拼音或者提取汉字首字母
将汉字转为全拼,提取汉字首字母 <?php /** * 基于PHP语言的汉语转拼音的类 * 兼容 UTF8.GBK.GB2312 编码,无须特殊处理 * 对中文默认返回拼音首字母缩写,其它字符不 ...
- Python笔记24-----迭代器、生成器的使用(如嵌套列表的展开、树的遍历等)
1.递归yield使用: 嵌套列表展开 def flatten(nested): if type(nested)==list: for sublist in nested: for i in flat ...
- 😈 HTTP 学习笔记
- BZOJ 4006 [JLOI2015]管道连接(斯坦纳树+子集DP)
明显是一道斯坦纳树的题. 然而这题只需要属性相同的点互相连接. 我们还是照常先套路求出\(ans[s]\). 然后对\(ans[s]\)做子集DP即可. 具体看代码. #include<iost ...
- NOI 2018 屠龙勇士 (拓展中国剩余定理excrt+拓展欧几里得exgcd)
题目大意:略 真是一波三折的一道国赛题,先学了中国剩余定理,勉强看懂了模板然后写的这道题 把取出的宝剑攻击力设为T,可得Ti*x=ai(mod pi),这显然是ax=c(mod b)的形式 这部分用e ...
- oracle截取某一个字符之前或之后的值;substr();instr()
函数介绍: 截取的函数: substr(?,?); substr(?,?,?); 获取目标字符出现的位置: instr(? , ? , ? ); instr( ? , ? , ? , ? ) 例: 字 ...
- spring mvc 下载的时候中文文件名不显示
Headers.add("Content-Disposition", "attachment;filename=" + new String(file.getB ...
- 【转】Visual Studio單元測試小應用-測執行時間
[转]Visual Studio單元測試小應用-測執行時間 Visual Studio的單元測試會記錄每一個測試的執行時間,如果有幾個Method要測效能,以前我會用Stopwatch,最近我都改用單 ...
- 【中山市选2010】【BZOJ2467】生成树
Description 有一种图形叫做五角形圈.一个五角形圈的中心有1个由n个顶点和n条边组成的圈. 在中心的这个n边圈的每一条边同一时候也是某一个五角形的一条边,一共同拥有n个不同的五角形.这些五角 ...
- 为什么整个互联网行业都缺前端project师?
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...