React知识点整理
面试题:三大框架中数据绑定实现上有何绑定?
一、概述:是Facebook维护的一个构建用户界面的JS库,核心很精简,但是生态圈扩展很大.
React:MVVM框架
React-Router:路由
Redux:状态管理
React-Native:移动APP开发
React VR/360:虚拟现实开发
二、两种使用方法:
1.使用script引入脚本 ------react.js react-dom.js babel.js
2.脚手架方式
三、React核心概念之一:JSX
概述:JavaScript XML,语法像XML,用于创建DOM对象
let el = document.createElement('div')
let el = React.createElement('div',{属性},'内容' )
let el = <div className="danger" innerHTML=" " innerText=" ">内容</div>
JSX基础语法:
1.不是字符串,不能加引号;本质是JS代码
2.语法是XML:有且只有一个根元素;元素必须闭合;属性必须用引号
3.标签可以是HTML标签(必须纯小写);也可以是自定义组件标签(必须大驼峰写法)
4.标签名本质都是JS对象,属性都是JSDOM对象属性,
如class需要写为className,for需要写为htmlFor,
也可以使用innerText/innerHTML
5.JSX中可以使用数据绑定表达式{ 表达式 }
1.内容绑定
<p>{表达式}</p>
算术运算
比较运算---不显示true/false
逻辑运算---不显示true/false
三目运算
调用函数:对象方法/全局函数/匿名函数
创建对象:创建的对象必须可以转为字符串
调用全局对象:JSON.stringify() ----React没有过滤器/管道
2.属性绑定
<p title={表达式}></p>
3.指令绑定
React中没有指令
1.选择渲染
<div>
{
(function(){
if(...) return <p>欢迎回来</p>
else return <a>请登录</a>
})()
|
</div>
2.列表渲染
let list =[10,20,50,30]
<ul>
list.map((e,i)=>{
return <li key={i}>{e}</li>
})
</ul>
4.事件绑定
5.双向数据绑定
四、React核心概念之二:组件
概述:是一段可重用的HTML片段
组件=模板 + 脚本数据 + 样式
两种形式的组件声明方法
1.function式组件(适合于简单组件)
function MyC01(){
return <div></div>
}
<MyC01></MyC01>
2.class式组件(适合于复杂组件)
class MyC02 extends React.Component{
render(){
return <div></div>
}
}
<MyC02></MyC02>
React知识点整理的更多相关文章
- web前端面试知识点整理
一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...
- React知识点总结1
最近打算把react知识点总结下: React特点 1.虚拟DOM 在内存中操作DOM,在内存中创建数据结构,只会更新有差异的地方 2.组件化 页面分成若干个组件,每个组件包含逻辑结构和样式 组件仅包 ...
- ACM个人零散知识点整理
ACM个人零散知识点整理 杂项: 1.输入输出外挂 //读入优化 int 整数 inline int read(){ int x=0,f=1; char ch=getchar(); while(ch& ...
- Android 零散知识点整理
Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...
- vue前端面试题知识点整理
vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- kafka知识点整理总结
kafka知识点整理总结 只不过是敷衍 2017-11-22 21:39:59 kafka知识点整理总结,以备不时之需. 为什么要使用消息系统: 解耦 并行 异步通信:想向队列中放入多少消息就放多少, ...
- JSP页面开发知识点整理
刚学JSP页面开发,把知识点整理一下. ----------------------------------------------------------------------- JSP语法htt ...
- JS知识点整理(二)
前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...
- css入门知识点整理
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
随机推荐
- php sprintf() 函数把格式化的字符串写入一个变量中。
来源:https://blog.csdn.net/zxh1220/article/details/79709207 HP sprintf() 函数用到的参数 printf — 输出格式化字符串 spr ...
- 【JAVA基础】05 Java语言基础:数组
1. 数组概述和定义格式说明 为什么要有数组(容器) 为了存储同种数据类型的多个值 数组概念 数组是存储同一种数据类型多个元素的集合.也可以看成是一个容器. 数组既可以存储基本数据类型,也可以存储引用 ...
- 2018年要学习的10大Python Web框架
通过为开发人员提供应用程序开发结构,框架使开发人员的生活更轻松.他们自动执行通用解决方案,缩短开发时间,并允许开发人员更多地关注应用程序逻辑而不是常规元素. 在本文中,我们分享了我们自己的前十大Pyt ...
- 算法竞赛进阶指南--快速幂,求a^b mod p
// 快速幂,求a^b mod p int power(int a, int b, int p) { int ans = 1; for (; b; b >>= 1) { if (b &am ...
- POJ 3581 Prime Gap(二分)
Prime Gap Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 11009 Accepted: 6298 Descriptio ...
- 目标检测之yolo源码分析
三.配置文件详解(config.py) import os # 数据集路径,和模型检查点路径 # # path and dataset parameter # DATA_PATH = 'data' # ...
- P5960 差分约束算法模板
差分约束 差分约束,一般用来解决有\(n\)个未知数,\(m\)个不等式方程的问题,形如: \[\begin{cases} \ x_{a_1}-x_{b_1}\leq y_1\\ \ x_{a_2}- ...
- 数据库SQL---实体-联系模型(E-R模型)
1.E-R模型的基本概念与表示 1)实体与实体集 (1)实体:可以是有形的.实在的事物(如每个员工),可以是抽象的.概念上存在的事物(如一个部门). (2)实体的特征:独立存在.可区别于其他实体. ( ...
- Java笔记(day14-17)
集合类的由来: 对象用于封装特有数据,对象多了需要存储,如果对象的个数不确定. 就使用集合容器进行存储. 集合特点: 1,用于存储对象的容器. 2,集合的长度是可变的. 3,集合中不可以存储基本数据类 ...
- CTF-Reverse-[GXYCTF2019]luck_guy
CTF-Reverse-[GXYCTF2019]luck_guy 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!本文仅用于学习与 ...