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的内容.重点要关注的是选择器 ...
随机推荐
- python爬虫(1)requests库
在pycharm中安装requests库的一种方法 首先找到设置 搜索然后安装,蓝色代表已经安装 requests库中的get请求 与HTTP协议相对应,requests库也有七种请求方式. 获取ur ...
- SQLI-LABS学习笔记(二)
逼话少说,如有错误,烦请指出,谢谢 这两天生病,效率很低 第5关 打开页面 发现跟前几题不同,没有直接返回数据.. 加个单引号 You have an error in your SQL syntax ...
- 梁国辉获Yes评分表系统3.0计算机软件著作权
梁国辉获Yes评分表系统3.0计算机软件著作权 Liang Guohui won the Yes score system 3 computer software copyright 登记证书如下 R ...
- StringBuilder、StringBuffer分析比较
StringBuilder.StringBuffer源码分析 StringBuilder源码分析 类结构 public final class StringBuilder extends Abstra ...
- Hexo博客插入图片的方法
Hexo博客插入图片的方法 hexo图片blog hexo blog 插入图片的方法总结 hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /pub ...
- 写给Java程序员的Java虚拟机学习指南
大家好,我是极客时间<深入拆解Java虚拟机>作者.Oracle Labs高级研究员郑雨迪.有幸借这个专题的机会,能和大家分享为何Java工程师要学Java虚拟机?如何掌握Java虚拟机? ...
- ffmpeg+SDL2实现的音频播放器V2.0(无杂音)
1. 前言 目前为止,学习了并记录了ffmpeg+SDL2显示视频以及事件(event)的内容. 这篇中记录ffmpeg+SDL2播放音频,没加入事件处理. 接下来加入事件处理并继续学习音视频同步,再 ...
- 编程语言50年来的变化,我用50种编程语言告诉你“Hello world”怎么写!
当我们学习一门新的语言时,"Hello, World!"通常是我们所写的第一个程序. 因此,所有程序员在职业生涯中至少完成了"Hello, World!"程序员 ...
- 网速慢?不!可能是DNS出了问题! 公共DNS优选之 BAT 百度、腾讯、阿里、谷歌DNS哪个更快?
如果一下还是解决不了你的问题请这边走 首先是Google的DNS: 8.8.8.8 丢包严重 PASS但是扶墙的时候是必备的,如果有扶墙的需求的话可以备用. 二.百度DNS 180.76.76.76 ...
- 图论--差分约束--HDU\HDOJ 4109 Instrction Arrangement
Problem Description Ali has taken the Computer Organization and Architecture course this term. He le ...