react notes
jsx
- 在JSX中嵌入用户输入是安全的,默认情况下, 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前,所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击
- Babel 将JSX编译成
React.createElement()
调用 - 用 JSX 指定子元素如果是空标签,您应该像 XML 一样,使用
/>
立即闭合它
元素渲染
- React 元素是 不可突变(immutable) 的,一旦你创建了一个元素, 就不能再修改其子元素或任何属性。一个元素就像电影里的一帧: 它表示在某一特定时间点的 UI
- 就我们所知, 更新 UI 的唯一方法是创建一个新的元素, 并将其传入
ReactDOM.render()
方法. - React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态
组件和属性
- 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”), 并返回 React 元素,用以描述屏幕显示内容
- 组件名称总是以大写字母开始
- 不要害怕把一个组件分为多个更小的组件
- props是只读的,所有 React 组件都必须是纯函数,并禁止修改其自身 props 。
state和生命周期
state
和props
类似,但是它是私有的,并且由组件本身完全控制- 正确使用state:
不要直接赋值修改state,只有在构造函数中;
state更新可能是异步的,为了优化性能有可能会将多个setState()
调用合并为一次更新,可以传函数(prevState, props)作为参数;
state更新会被合并 - 数据向下流动
- state 只用于交互
处理事件
- React 事件使用驼峰命名,而不是全部小写。通过 JSX , 你传递一个函数作为事件处理程序,而不是一个字符串
- 参数
e
作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过bind
的方式,事件对象以及更多的参数将会被隐式的进行传递。
条件渲染
- 元素变量
- 使用逻辑 && 操作符的内联 if 用法
- 从组件的
render
方法返回null
不会影响组件生命周期方法的触发。 例如,componentWillUpdate
和componentDidUpdate
仍将被调用。
列表
- 键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识
- 如果列表项的顺序可能改变,我们不建议使用索引作为 keys。这可能会对性能产生负面影响,并可能导致组件状态问题
- 一个好的经验准则是元素中调用
map()
需要 keys - keys 在同辈元素中必须是唯一的
表单
- 受控组件:其值由 React 控制的输入表单元素称为“受控组件”,如
<input>
,<textarea>
和<select>
- 非受控组件:input(file),
状态提升
react notes的更多相关文章
- [React Native] Complete the Notes view
In this final React Native lesson of the series we will finalize the Notes view component and squash ...
- 初探React,将我们的View标签化
前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...
- 一个用react+nodejs实现的笔记本小应用
寒假回家产品经理一直叮嘱着要继续做学校团队的辣个项目,但是...,我到现在一点都还没做,而且还销声匿迹躲了起来藏了几天,是的我干了票大的,想把项目用一种新的架构实现了,所以这几天一直在偷偷摸摸的做一些 ...
- [React Native] Using the Image component and reusable styles
Let's take a look at the basics of using React Native's Image component, as well as adding some reus ...
- 使用 React 和 Flux 创建一个记事本应用
React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库.唯一的问题是 React 不会关注于你的应用如何处理数据.大多数人把 React 当做 MV* 中的 V.所以,Facebo ...
- vue 和 react 选择
经典 react 还是有其优点的, 生态更丰富, 更容易 测试 和 调试, 更适合超大型应用, 更适合app, weex不一定能到达 reactNative的高度 而vue , 更为直观, 上手 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- [React] Build a slide deck with mdx-deck using Markdown + React
In this lesson we'll use mdx-deck to create a slide deck using Markdown and React. We'll look at add ...
- 假装前端工程师(一)Icework + GitHub pages 快速构建可自定义迭代开发的 react 网站
icework + gh-pages 超快部署超多模版页面 项目地址:https://github.com/yhyddr/landingpage效果地址:https://yhyddr.github.i ...
随机推荐
- cocos代码研究(7)即时动作子类学习笔记
理论部分 即时动作是会立即被执行的动作.他们没有持续时间动作(ActionInterval)的持续时间属性.继承自 FiniteTimeAction.被 CallFunc, FlipX, FlipY, ...
- HTTP 头和 PHP header() 函数
http://unifreak.github.io/translation/Http_headers_and_PHP_header()_function 引言 许多初级到中级的的 PHP 程序员把 h ...
- Django初级手册2-管理界面的使用及定制
管理界面的使用 管理界面的URL,帐号和密码在第一次输入syncdb时建立 http://127.0.0.1:8000/admin/ 将app加入管理界面 编辑polls/admin.py from ...
- FAFU 1395
动态规划:...翻牌FAFU 1395 动态规划
- cf428c 模拟题
这题说的是给了 n个数然后又 k次 的交换任意位置的 数字的机会 计算最长的连续子序列的和 这要撸 模拟整个 过程 并不能就是算最长的递增序列 如果只是 找最长的 和序列的 话 会存在 很多问题 ...
- uva 13598
/* 题目的大意是 给你 N 学生 然后 给前 K个学生编号了 给定的 号码 , 然后你按照 使得接下来学生 学号尽量小的 方法 从第 K+1个学生开始编号 每个号码 自然只能用一次, 解答 : 先将 ...
- linux常用命令:wget 命令
wget命令用来从指定的URL下载文件.wget非常稳定,它在带宽很窄的情况下和不稳定网络中有很强的适应性,如果是由于网络的原因下载失败,wget会不断的尝试,直到整个文件下载完毕.如果是服务器打断下 ...
- 关于Context []startup failed due to previous errors
文章转自:http://blog.sina.com.cn/s/blog_49b4a1f10100q93e.html 框架搭建好后,启动服务器出现如下的信息: log4j:WARN No appende ...
- php抛出异常
php抛出异常:throw new Exception("xxxxxx!"); 实例代码: try{ if ($mysqli->connect_errno) { sleep( ...
- appium自动化测试实战
一.Appium的介绍 Appium是一款开源的自动化测试工具,其支持iOS和安卓平台上的原生的,基于移动浏览器的,混合的应用. 1. 使用appium进行自动化测试的好处 Appium在不同平台 ...