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

<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>