[WIP]React 核心概念
创建: 2019/05/01
Hello World | |||||
ReactDOM.render( |
|||||
JSX简介 | |||||
插值 |
大括号 {} ● 内部可放任何JavaScript表达式 const jsxElement = <p sampleProp={0}>{buildName(people)}</p>; |
||||
jsx也是表达式 |
被编译成函数 ● 可以赋值给变量 const buildName = (people) => { |
||||
指定属性 |
和html一样, 但要用驼峰写法(因为JSX是JS) ● 赋值可以双引号可以用插值(不要组合起来用) // 双引号 |
||||
嵌套 |
● JSX内部可以嵌套JSX <p>测试 ● 对于空标签, 可以 /> 结尾 const blankElement = <p/>; |
||||
自动转义 |
JSX的所有内容自动转义 ● 可以直接插入用户输入内容, 不用担心安全问题 |
||||
JSX 表示对象 |
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用 // JSX |
||||
元素渲染 | |||||
根节点 |
该节点内的所有内容都将由 React DOM 管理 ● 可以有任意多个根节点 |
||||
渲染 |
ReactDOM.render(reactDOM, dom) 将一个 React 元素渲染到根 DOM 节点中 ● 参数
|
||||
更新已渲染的元素 |
重新调用ReactDOM.render ● React自动对比新旧ReactDOM, 只更新变化的部分 |
||||
组件&Props | |||||
定义组件 |
组件名称必须以大写字母开头 ● 函数组件 function Welcome(props) { ● class组件 |
||||
渲染组件 | 接收到的参数会作为props传入 | ||||
组合组件 | 组件可以互相嵌套 | ||||
Props 的只读性 |
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改 ● 需要实时变化的属性放入state |
||||
state&生命周期 | |||||
生命周期函数 |
|
||||
state |
React通过this.state来检测自身是否被改变 ● 更新用setState(), 不要直接修改State this.setState({a:1}) 如果要用到之前的props或states, 不可以直接在setState里面调用. 用函数 this.setState((state, props) => ({ ● 只有构造函数可以给state赋值 class Sample extends React.Component { ● setState()是浅合并 参数里没提到的保持原样 |
||||
事件处理 | |||||
js关于事件处理相关 | |||||
React 事件的命名采用小驼峰式 例: onClick |
|||||
阻止默认事件 |
不能用return false 必须用 preventDefault |
||||
添加事件 |
一般不需要 addEventListener , 只需在渲染时添加监听器 ● 监听函数设置成箭头函数, 以确保this正确 class Events extends React.Component { ● 若不设置为箭头函数, 为确保this正确
|
||||
向事件函数传递参数 |
React的事件对象 e 会被作为第二个参数传递
|
||||
条件渲染 | |||||
阻止渲染 | render内部返回null | ||||
与运算符&& |
a && b 若a可转换为 |
||||
三项运算符 |
con ? a : b |
||||
列表&key | |||||
构建列表组件 |
class ListKey extends React.Component { |
||||
key |
key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。 ● 尽量在 this.datas = new Array(10).fill(Math.random()*100).map((v, i) => {return v+i}); ● 数组元素中使用的 key 在其兄弟节点之间应该是独一无二的 ● key 会传递信息给 React ,但不会传递给你的组件 需要key值的用其他属性名显示传递 <li key={i} mykey={i}>data: {parseInt(v)}</li> |
||||
表单 | |||||
受控组件 |
所有事件都需要添加处理函数 class Reservation extends React.Component { |
||||
状态提升 | |||||
将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中,便可实现共享 state。这就是所谓的“状态提升” | |||||
组合&继承 | |||||
包含关系 |
● 嵌套的组件全部在 props.children 里 ● 预留placeholder可以用任何名字, 可以传入任何对象 function SplitPane(props) { |
||||
特例关系 |
“特殊”组件可以通过 props 定制并渲染“一般”组件 function Dialog(props) { |
||||
继承 | 不需要使用 | ||||
React哲学 | |||||
用 React 创建一个静态版本 |
渲染 UI 和添加交互分开 |
||||
确定 UI state 的最小(且完整)表示 |
通过问自己以下三个问题,你可以逐个检查相应数据是否属于 state:
|
||||
确定 state 放置的位置 |
对于应用中的每一个 state:
|
||||
添加反向数据流 | 回调 |
[WIP]React 核心概念的更多相关文章
- [React]核心概念
本文是对React文档:核心概念部分的笔记,内容大致与文档相同. 文档链接 React哲学部分写的很好,务必要看 JSX JSX是JS的语法扩展,配合react使用,为JS和HTML的混写 JSX支持 ...
- react 教程—核心概念
react 核心概念 : https://react.docschina.org/docs/getting-started.html(官网) 或 https://www.w3cschool.cn/ ...
- React 核心思想之声明式渲染
React 发展很快,概念也多,本文目的在于帮助初学者理清 React 核心概念. React 及 React 生态 React 的核心概念只有 2 点: 声明式渲染(Declarative) 基于组 ...
- Redux 核心概念
http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html .本文不是官方文档的翻译. ...
- fusionjs 学习二 核心概念
核心概念 middleware 类似express 的中间件模型(实际上是构建在koa中间件模型上的),但是和koa 的中间件有差异 fusionjs 的中间件同时可以运行在浏览器页面加载的时候 se ...
- 深入理解Vue组件3大核心概念
摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 Fundebug经授权转载,版权归原作者所有. 前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽 ...
- 领域驱动设计(DDD)部分核心概念的个人理解
领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...
- Javascript本质第一篇:核心概念
很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...
- [程序设计语言]-[核心概念]-02:名字、作用域和约束(Bindings)
本系列导航 本系列其他文章目录请戳这里. 1.名字.约束时间(Binding Time) 在本篇博文开始前先介绍两个约定:第一个是“对象”,除非在介绍面向对象语言时,本系列中出现的对象均是指任何可以有 ...
随机推荐
- 正确安全清空在线慢查询日志slow log的流程 (转)
1, see the slow log status; mysql> show variables like '%slow%'; +---------------------+--------- ...
- 把ASM下的HDD VM转换成ARM下Managed Disk的SSD VM
在ASM下,要把HDD的VM转换成SSD的VM步骤非常复杂.需要手工把Disk从普通存储账户复制到高级存储账户.再通过这个Disk创建VM. 目前在有了ASM到ARM的迁移工具,以及Managed D ...
- Jmeter & TICK
背景: 本来只是想在将Jmeter的测试结果写入InfluxDB, 但发现从InfluxDB V1.3后开始, 已经不支持Web Admin interface, 才发现InfluxData 搞了 ...
- maven配置的问题,maven的环境变量配置
不要在用户变量处配置用户变量,直接将maven的bin文件夹路径配置到path环境变量
- 阿里巴巴开源项目: canal 基于mysql数据库binlog的增量订阅&消费
背景 早期,阿里巴巴B2B公司因为存在杭州和美国双机房部署,存在跨机房同步的业务需求.不过早期的数据库同步业务,主要是基于trigger的方式获取增 量变更,不过从2010年开始,阿里系公司开始逐步的 ...
- $timeout()定时器
非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇到 ...
- struts2中常用constant命令配置
struts.objectFactory这个属性用 于说明Struts2的 对象池创建工厂,Struts2也有自己的对象池,就像Spring那样,在配置文件中你可以引用对象池中的对象,你可以借助于Sp ...
- 解决django不能以本机ip地址访问
在使用django框架来架设网站时,我们测试一般是通过django的开发服务器来完成,但是我们可以看到生成的地址是127.0.0.1:8000这样的话,我们在外网就无法访问了. 解决办法是通过传入第三 ...
- Py修行路 Pandas 模块基本用法
pandas 安装方法:pip3 install pandas pandas是一个强大的Python数据分析的工具包,它是基于NumPy构建的模块. pandas的主要功能: 具备对其功能的数据结构D ...
- [转]RabbitMQ三种Exchange模式(fanout,direct,topic)的性能比较
RabbitMQ中,所有生产者提交的消息都由Exchange来接受,然后Exchange按照特定的策略转发到Queue进行存储 RabbitMQ提供了四种Exchange:fanout,direct, ...