jsx

  1. 在JSX中嵌入用户输入是安全的,默认情况下, 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前,所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击
  2. Babel 将JSX编译成 React.createElement() 调用
  3. 用 JSX 指定子元素如果是空标签,您应该像 XML 一样,使用 />立即闭合它

元素渲染

  1. React 元素是 不可突变(immutable) 的,一旦你创建了一个元素, 就不能再修改其子元素或任何属性。一个元素就像电影里的一帧: 它表示在某一特定时间点的 UI
  2. 就我们所知, 更新 UI 的唯一方法是创建一个新的元素, 并将其传入 ReactDOM.render() 方法.
  3. React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态

组件和属性

  1. 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”), 并返回 React 元素,用以描述屏幕显示内容
  2. 组件名称总是以大写字母开始
  3. 不要害怕把一个组件分为多个更小的组件
  4. props是只读的,所有 React 组件都必须是纯函数,并禁止修改其自身 props 。

state和生命周期

  1. state 和 props 类似,但是它是私有的,并且由组件本身完全控制
  2. 正确使用state:
    不要直接赋值修改state,只有在构造函数中;
    state更新可能是异步的,为了优化性能有可能会将多个 setState() 调用合并为一次更新,可以传函数(prevState, props)作为参数;
    state更新会被合并
  3. 数据向下流动
  4. state 只用于交互

处理事件

  1. React 事件使用驼峰命名,而不是全部小写。通过 JSX , 你传递一个函数作为事件处理程序,而不是一个字符串
  2. 参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。

条件渲染

  1. 元素变量
  2. 使用逻辑 && 操作符的内联 if 用法
  3. 从组件的 render 方法返回 null 不会影响组件生命周期方法的触发。 例如, componentWillUpdate 和 componentDidUpdate 仍将被调用。

列表

  1. 键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识
  2. 如果列表项的顺序可能改变,我们不建议使用索引作为 keys。这可能会对性能产生负面影响,并可能导致组件状态问题
  3. 一个好的经验准则是元素中调用 map() 需要 keys
  4. keys 在同辈元素中必须是唯一的

表单

  1. 受控组件:其值由 React 控制的输入表单元素称为“受控组件”,如<input><textarea> 和 <select>
  2. 非受控组件:input(file),

状态提升

react notes的更多相关文章

  1. [React Native] Complete the Notes view

    In this final React Native lesson of the series we will finalize the Notes view component and squash ...

  2. 初探React,将我们的View标签化

    前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...

  3. 一个用react+nodejs实现的笔记本小应用

    寒假回家产品经理一直叮嘱着要继续做学校团队的辣个项目,但是...,我到现在一点都还没做,而且还销声匿迹躲了起来藏了几天,是的我干了票大的,想把项目用一种新的架构实现了,所以这几天一直在偷偷摸摸的做一些 ...

  4. [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 ...

  5. 使用 React 和 Flux 创建一个记事本应用

    React,来自 Facebook,是一个用来创建用户界面的非常优秀的类库.唯一的问题是 React 不会关注于你的应用如何处理数据.大多数人把 React 当做 MV* 中的 V.所以,Facebo ...

  6. vue 和 react 选择

    经典 react 还是有其优点的, 生态更丰富,  更容易 测试 和 调试, 更适合超大型应用,  更适合app,  weex不一定能到达 reactNative的高度 而vue , 更为直观, 上手 ...

  7. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  8. [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 ...

  9. 假装前端工程师(一)Icework + GitHub pages 快速构建可自定义迭代开发的 react 网站

    icework + gh-pages 超快部署超多模版页面 项目地址:https://github.com/yhyddr/landingpage效果地址:https://yhyddr.github.i ...

随机推荐

  1. cocos代码研究(7)即时动作子类学习笔记

    理论部分 即时动作是会立即被执行的动作.他们没有持续时间动作(ActionInterval)的持续时间属性.继承自 FiniteTimeAction.被 CallFunc, FlipX, FlipY, ...

  2. HTTP 头和 PHP header() 函数

    http://unifreak.github.io/translation/Http_headers_and_PHP_header()_function 引言 许多初级到中级的的 PHP 程序员把 h ...

  3. Django初级手册2-管理界面的使用及定制

    管理界面的使用 管理界面的URL,帐号和密码在第一次输入syncdb时建立 http://127.0.0.1:8000/admin/ 将app加入管理界面 编辑polls/admin.py from ...

  4. FAFU 1395

    动态规划:...翻牌FAFU 1395 动态规划

  5. cf428c 模拟题

    这题说的是给了 n个数然后又 k次 的交换任意位置的 数字的机会  计算最长的连续子序列的和 这要撸  模拟整个 过程 并不能就是算最长的递增序列 如果只是 找最长的 和序列的 话 会存在 很多问题 ...

  6. uva 13598

    /* 题目的大意是 给你 N 学生 然后 给前 K个学生编号了 给定的 号码 , 然后你按照 使得接下来学生 学号尽量小的 方法 从第 K+1个学生开始编号 每个号码 自然只能用一次, 解答 : 先将 ...

  7. linux常用命令:wget 命令

    wget命令用来从指定的URL下载文件.wget非常稳定,它在带宽很窄的情况下和不稳定网络中有很强的适应性,如果是由于网络的原因下载失败,wget会不断的尝试,直到整个文件下载完毕.如果是服务器打断下 ...

  8. 关于Context []startup failed due to previous errors

    文章转自:http://blog.sina.com.cn/s/blog_49b4a1f10100q93e.html 框架搭建好后,启动服务器出现如下的信息: log4j:WARN No appende ...

  9. php抛出异常

    php抛出异常:throw new Exception("xxxxxx!"); 实例代码: try{ if ($mysqli->connect_errno) { sleep( ...

  10. appium自动化测试实战

    一.Appium的介绍   Appium是一款开源的自动化测试工具,其支持iOS和安卓平台上的原生的,基于移动浏览器的,混合的应用. 1. 使用appium进行自动化测试的好处 Appium在不同平台 ...