面试题:三大框架中数据绑定实现上有何绑定?

一、概述:是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知识点整理的更多相关文章

  1. web前端面试知识点整理

    一.HTML5新特性 本地存储 webStorage websocket webworkers新增地理位置等API对css3的支持canvas多媒体标签新增表单元素类型结构标签:header nav ...

  2. React知识点总结1

    最近打算把react知识点总结下: React特点 1.虚拟DOM 在内存中操作DOM,在内存中创建数据结构,只会更新有差异的地方 2.组件化 页面分成若干个组件,每个组件包含逻辑结构和样式 组件仅包 ...

  3. ACM个人零散知识点整理

    ACM个人零散知识点整理 杂项: 1.输入输出外挂 //读入优化 int 整数 inline int read(){ int x=0,f=1; char ch=getchar(); while(ch& ...

  4. Android 零散知识点整理

    Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...

  5. vue前端面试题知识点整理

    vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  6. kafka知识点整理总结

    kafka知识点整理总结 只不过是敷衍 2017-11-22 21:39:59 kafka知识点整理总结,以备不时之需. 为什么要使用消息系统: 解耦 并行 异步通信:想向队列中放入多少消息就放多少, ...

  7. JSP页面开发知识点整理

    刚学JSP页面开发,把知识点整理一下. ----------------------------------------------------------------------- JSP语法htt ...

  8. JS知识点整理(二)

    前言 这是对平时的一些读书笔记和理解进行整理的第二部分,第一部分请前往:JS知识点整理(一).本文包含一些易混淆.遗漏的知识点,也会配上一些例子,也许不是很完整,也许还会有点杂,但也许会有你需要的,后 ...

  9. css入门知识点整理

    css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...

随机推荐

  1. CentOS 7 + Win 双系统的安装遇到的重要问题

    前言:对于刚学linux的朋友们,多多小小因为各种原因需要装双系统,亦或者爱好使然.多数是问题解决,第一次装系统者不推荐看-. 那么现在内德在此就说说在本本上装双系统会遇到的问题及其解决方法. 环境准 ...

  2. tagbar 调到函数定义再跳回

    首先要在源码文件夹下执行 ctags -R * 生成tags文件 齐次要安装 YouCompleteMe ctrl + ] 跳到函数定义 Ctrl-o 和 Ctrl-I 跳回.我试验的只有 Ctrl- ...

  3. [Inno Setup] 卸载 重启之后 删除文件

    某些系统文件,例如驱动,不重启无法删除. 利用windows注册表里的 RunOnce.注意必须在HKLM下,否则可能权限不够. 不能直接填cmd命令,要以cmd的参数形式填写. procedure ...

  4. Openstack object list 一次最多有一万个 object

    When you request a list of containers or objects, Object Storage returns a maximum of 10,000 names f ...

  5. java中的Volatile关键字使用

    文章目录 什么时候使用volatile Happens-Before java中的Volatile关键字使用 在本文中,我们会介绍java中的一个关键字volatile. volatile的中文意思是 ...

  6. zabbix管理,添加监控主机

    一:添加本机为监控主机  二.监控其他Linux主机agent端 1.环境部署 [root@localhost ~]# hostname agent.zabbix.com[root@localhost ...

  7. CSS开发技巧(一):button样式设置

    button样式需要注意的有几点: 1.建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调: 2.建议有一个padding,以免内部文本显得过于拥挤: 2.hover时需要有颜色变化,以告 ...

  8. VB中使用字典存储类对象

    2019独角兽企业重金招聘Python工程师标准>>> NODE类 Public pNext As NODE Public pPrev As NODE Public data As ...

  9. 关于通过Date.getTime()得到1970年01月1日0点零分问题验证

     public static String getTimestamp_1970() throws Exception {   java.text.SimpleDateFormat formater = ...

  10. 2019 ICPC 南京网络赛 H-Holy Grail

    As the current heir of a wizarding family with a long history,unfortunately, you find yourself force ...