reac的小知识

一、React是什么？

React是一个将数据渲染为HTML视图的开源JavaScript库。

二、为什么要使用React

1·原生JavaScript操作DOM繁琐、效率低
2·使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
3·原生JavaScript没有组件化编码方案，代码复用率低。

三、React特点

1·采用组件化模式、声明式编码，提高开发效率及组件复用率。
2·在React Native中可以使用React语法进行移动端开发。
3·使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

四、React的安装与创建

01.安装：

npm i -g create-react-app

02.创建myreact项目：

create-react-app myreact

 jsx语法
在react中的代码编写并不同于其他框架中的语法,我们常见的JS语言虽说比较完善,但还是有着本身的痛点.比如:1.代码比较烦乱,程序员去编写时,内容过于繁琐.直接使用全部js变量。而传统的模板，里面的变量需要你在另一种语言中指定，一般要多写代码。而jsx可以是这些痛点消失
jsx就是javascript与html混合写法,方便js中书写html模板
jsx的特点:
只有个根节点
{} js表达式
{/* 注释内容*/}
className定义类名
样式对象会自动展开
数组可以包含html ,并自定展开
 

react的组件
组件的优点：
方便复用
方便维护
方便重构

组件的定义可分为2种：

函数声明组件
function App(){
    return <div> ... </div>
}
export default App;
类声明组件
import React,{Componet} from 'react'

class App extends Componet {
    constructor(props){
        super(props)
    }
    state = {num:5}
   render(){
      return <div></div>
   }
}
export default App
函数声明组件与类声明组件区别：
函数组件通常展示，类组件通常做为容器
类组件可以有state,管理数据用类组件，函组件没有state
函组件没有this，类组件 有this
函数组件没有生命周期，类组件有生命周期