面试题:三大框架中数据绑定实现上有何绑定?
一、概述:是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>