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

一、概述:是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. php sprintf() 函数把格式化的字符串写入一个变量中。

    来源:https://blog.csdn.net/zxh1220/article/details/79709207 HP sprintf() 函数用到的参数 printf — 输出格式化字符串 spr ...

  2. 【JAVA基础】05 Java语言基础:数组

    1. 数组概述和定义格式说明 为什么要有数组(容器) 为了存储同种数据类型的多个值 数组概念 数组是存储同一种数据类型多个元素的集合.也可以看成是一个容器. 数组既可以存储基本数据类型,也可以存储引用 ...

  3. 2018年要学习的10大Python Web框架

    通过为开发人员提供应用程序开发结构,框架使开发人员的生活更轻松.他们自动执行通用解决方案,缩短开发时间,并允许开发人员更多地关注应用程序逻辑而不是常规元素. 在本文中,我们分享了我们自己的前十大Pyt ...

  4. 算法竞赛进阶指南--快速幂,求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 ...

  5. POJ 3581 Prime Gap(二分)

    Prime Gap Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 11009 Accepted: 6298 Descriptio ...

  6. 目标检测之yolo源码分析

    三.配置文件详解(config.py) import os # 数据集路径,和模型检查点路径 # # path and dataset parameter # DATA_PATH = 'data' # ...

  7. P5960 差分约束算法模板

    差分约束 差分约束,一般用来解决有\(n\)个未知数,\(m\)个不等式方程的问题,形如: \[\begin{cases} \ x_{a_1}-x_{b_1}\leq y_1\\ \ x_{a_2}- ...

  8. 数据库SQL---实体-联系模型(E-R模型)

    1.E-R模型的基本概念与表示 1)实体与实体集 (1)实体:可以是有形的.实在的事物(如每个员工),可以是抽象的.概念上存在的事物(如一个部门). (2)实体的特征:独立存在.可区别于其他实体. ( ...

  9. Java笔记(day14-17)

    集合类的由来: 对象用于封装特有数据,对象多了需要存储,如果对象的个数不确定. 就使用集合容器进行存储. 集合特点: 1,用于存储对象的容器. 2,集合的长度是可变的. 3,集合中不可以存储基本数据类 ...

  10. CTF-Reverse-[GXYCTF2019]luck_guy

    CTF-Reverse-[GXYCTF2019]luck_guy 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!本文仅用于学习与 ...