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.内容绑定

算术运算

比较运算---不显示true/false

逻辑运算---不显示true/false

三目运算

调用函数:对象方法/全局函数/匿名函数

创建对象:创建的对象必须可以转为字符串

调用全局对象:JSON.stringify() ----React没有过滤器/管道

2.属性绑定

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>

}

2.class式组件(适合于复杂组件)

class MyC02 extends React.Component{

render(){

return <div></div>

}

巴特西

React知识点整理

最新文章

热门文章