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

一、概述:是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. python爬虫(1)requests库

    在pycharm中安装requests库的一种方法 首先找到设置 搜索然后安装,蓝色代表已经安装 requests库中的get请求 与HTTP协议相对应,requests库也有七种请求方式. 获取ur ...

  2. SQLI-LABS学习笔记(二)

    逼话少说,如有错误,烦请指出,谢谢 这两天生病,效率很低 第5关 打开页面 发现跟前几题不同,没有直接返回数据.. 加个单引号 You have an error in your SQL syntax ...

  3. 梁国辉获Yes评分表系统3.0计算机软件著作权

    梁国辉获Yes评分表系统3.0计算机软件著作权 Liang Guohui won the Yes score system 3 computer software copyright 登记证书如下 R ...

  4. StringBuilder、StringBuffer分析比较

    StringBuilder.StringBuffer源码分析 StringBuilder源码分析 类结构 public final class StringBuilder extends Abstra ...

  5. Hexo博客插入图片的方法

    Hexo博客插入图片的方法 hexo图片blog hexo blog 插入图片的方法总结 hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /pub ...

  6. 写给Java程序员的Java虚拟机学习指南

    大家好,我是极客时间<深入拆解Java虚拟机>作者.Oracle Labs高级研究员郑雨迪.有幸借这个专题的机会,能和大家分享为何Java工程师要学Java虚拟机?如何掌握Java虚拟机? ...

  7. ffmpeg+SDL2实现的音频播放器V2.0(无杂音)

    1. 前言 目前为止,学习了并记录了ffmpeg+SDL2显示视频以及事件(event)的内容. 这篇中记录ffmpeg+SDL2播放音频,没加入事件处理. 接下来加入事件处理并继续学习音视频同步,再 ...

  8. 编程语言50年来的变化,我用50种编程语言告诉你“Hello world”怎么写!

    当我们学习一门新的语言时,"Hello, World!"通常是我们所写的第一个程序. 因此,所有程序员在职业生涯中至少完成了"Hello, World!"程序员 ...

  9. 网速慢?不!可能是DNS出了问题! 公共DNS优选之 BAT 百度、腾讯、阿里、谷歌DNS哪个更快?

    如果一下还是解决不了你的问题请这边走 首先是Google的DNS: 8.8.8.8 丢包严重 PASS但是扶墙的时候是必备的,如果有扶墙的需求的话可以备用. 二.百度DNS 180.76.76.76 ...

  10. 图论--差分约束--HDU\HDOJ 4109 Instrction Arrangement

    Problem Description Ali has taken the Computer Organization and Architecture course this term. He le ...