react学习笔记1一基础知识
1.React 是一个用于构建用户界面的 JAVASCRIPT 库
2.React 特点:
a.声明式的设计
b.采用虚拟dom,最大限度的减少dom操作
C.组件化,可以复用
D.单向响应的数据流,减少重复代码,比数据绑定更简单
3.babel.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。
4.jsx 优点:
a.类型安全的,在编译过程中就能发现错误
b.jsx执行更快,它在编译为javascript代码后进行了优化
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
5.如果我们需要向组件传递参数,可以使用 this.props 对象,
6。React State(状态)
getInitialState
this.setState()
7.state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变
getDefaultProps() 方法为 props 设置默认值
sample
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="Runoob" />,
document.getElementById('example')
);
8.Props 验证使用 propTypes, 当向 props 传入无效数据时,JavaScript 控制台会抛出警告。
9.React 组件 API
设置状态:setState
替换状态:replaceState
设置属性:setProps
替换属性:replaceProps
强制更新:forceUpdate
获取DOM节点:findDOMNode
判断组件挂载状态:isMounted
a.setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
b.props相当于组件的数据流,它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时,我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染,可以使用setProps()。
react学习笔记1一基础知识的更多相关文章
- ios开发学习笔记001-C语言基础知识
先来学习一下C语言基础知识,总结如下: 在xcode下编写代码. 1.编写代码 2.编译:cc –c 文件名.c 编译成功会生成一个 .o的目标文件 3.链接:把目标文件.o和系统自带的库合并在一起, ...
- FreeRTOS学习笔记——FreeRTOS 任务基础知识
RTOS 系统的核心就是任务管理,FreeRTOS 也不例外,而且大多数学习RTOS 系统的工程师或者学生主要就是为了使用RTOS 的多任务处理功能,初步上手RTOS 系统首先必须掌握的也是任务的创建 ...
- 《Python基础教程(第二版)》学习笔记 -> 第一章 基础知识
写笔记的原因:书也看了一遍,视频也看了,但总是感觉效果不好,一段时间忘记了,再看又觉得有心无力,都是PDF的书籍,打开了就没有心情了,上班一天了,回家看这些东西,真的没多大精力了,所以,我觉得还是把p ...
- 【 学习笔记 】memcached基础知识
源地址:http://kb.cnblogs.com/page/42731/ 仔细学习了下,以下是记录的笔记备忘内容. 一.memcached是什么? memcached是高性能的分布式内存缓存服 ...
- linux学习笔记:1.基础知识和命令行基本操作
初次学习linux系统,想在这里记录自己的学习痕迹,如发现有不足之处,希望能指出,谢谢啦,之后的学习是在虚拟机VMware 10下的Red Hat Enterprise linux 6 的操作. 一. ...
- libevent学习笔记 一、基础知识【转】
转自:https://blog.csdn.net/majianfei1023/article/details/46485705 欢迎转载,转载请注明原文地址:http://blog.csdn.net/ ...
- React学习笔记一:入门知识概览
一:安装react 1:直接下载react源码包,把需要用到的js文件引入自己的页面即可. 2:BootCDN 的 React CDN 库: 在页面代码中导入即可: <head> < ...
- MySQL学习笔记01_数据库基础知识
01_1 mysql数据库启动与停止 以<管理员权限>启动cmd: 输入net stop mysql停止mysql服务: 输入net start mysql启动mysql服务: 输入mys ...
- Spring基础学习笔记-Bean的基础知识
一. Bean的定义,初始化,使用和销毁 二.ref指定依赖的三种模式 三.Bean的五种自动装配模式(autowire) 四.Bean依赖检查的4种模式:配合atuowire使用,dependenc ...
随机推荐
- C++中数组声名后不初始化,数组里的值都是0吗?
这得看数组的申明情况: 1.全局/静态数组 如果申明的是全局/静态数组,系统会把数组的内容自动初始化为0. 2.局部数组 如果申明的是局部数组,数组的内容会是随机的,不一定是0.如函数内声明: int ...
- K-临近算法(KNN)
K-临近算法(KNN) K nearest neighbour 1.k-近邻算法原理 简单地说,K-近邻算法采用测量不同特征值之间的距离方法进行分类. 优点:精度高.对异常值不敏感.无数据输入假定. ...
- MapServer Tutorial——MapServer7.2.1教程学习——教程背景
MapServer Tutorial——MapServer7.2.1教程学习——教程背景 一.前言 目前处于MapServer学习入门阶段,所以每一步都需要打下扎实基础.尽自己最大的努力,去学习知识的 ...
- Linux 搭建Hadoop集群 ----workcount案例
在 Linux搭建集群---JDK配置 Linux搭建集群---SSH免密登陆 Linux搭建集群---集群搭建成功 的基础上实现workcount案例 注意 虚拟机三台启动集群(自己亲自搭建) 1. ...
- leetcode python 006
## 改为z型字符串def change_to_z(s,n): ## 字符串不能生成完整的区,用空格补全 b=len(s)%(2*n-2) if b!=0: s+=' ...
- select 取value值
<md-select ng-model="alarmSelect" style="margin: 0px 0px 0px 0px;" ng-change= ...
- 关于测绘软件南方CASS(7.0)成图系统的使用心得
关于测绘软件南方CASS(7.0)成图系统的使用心得 王天池 南方CASS是一款基于CAD平台开发的一套集地形地籍空间数据建库工程工程应用土石算量等功能为一体的绘图软件. 初识这款软件是在大二校园 ...
- I/O简介
用户空间是常规进程所在区域.JVM就是常规进程,驻守于用户空间.用户空间是非特权区域,在该区域执行的代码不能直接访问硬件设备. 内核空间是操作系统所在区域.内核代码有特别的权利:它能与设备控制器通讯, ...
- Linux 挂载windows目录
1.默认情况下,Linux服务器会装有samba-client,但是没有装samba-server.但是访问Windows系统共享,安装有samba-client就可以了. [root@test ~] ...
- 测试那些事儿—软测必备的Linux知识(一)
1.Linux入门须知 1.1文件.目录 linux文件:Linux所有的内容都是以文件形式保存,包括硬件(一切内容皆文件),并且linux不靠扩展名区分文件类型. linux文件有多种基本类型,常见 ...