React基础概述

什么是React？

React是一个声明式，高效且灵活的用于构建用户界面的JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作组件。

jsx语法

jsx：JavaScript和xml（html）标签混合写法

作用：在JavaScript中书写html模板

01 有且只有一个根节点

02 class写成className

03 在{}里写JavaScript

04 数组里面可以直接写html标签

05 注释用{/* */}

06 样式可以直接展开

React的安装与创建

安装：
npm  i create-react-app-g
安装脚手架

create-react-app myreact
创建项目

cd/myreact
键入项目目录

npm start 启动项目
npm  run eject 暴露webpack配置文件
npm run build 打包项目 

React的特点

轻量：React的开发版所有源码（包含注释）仅3000多行
原生：所有的React的代码都是用原生JS书写而成的，不依赖其他任何库
易扩展：React对代码的封装程度较低，也没有过多的使用魔法，所以React中的很多功能都可以扩展。
不依赖宿主环境：React只依赖原生JS语言，不依赖任何其他东西，包括运行环境。因此，它可以被轻松的移植到浏览器、桌面应用、移动端。
渐近式：React并非框架，对整个工程没有强制约束力。这对与那些已存在的工程，可以逐步的将其改造为React，而不需要全盘重写。
单向数据流：所有的数据自顶而下的流动
                     用JS代码声明界面
                     组件化

Components 组件

在DOM树上的节点被称为元素，在这里则不同，Virtual DOM上称为commponent。Virtual DOM的节点就是一个完整抽象的组件，它是由commponents组成。component的使用在 React 里极为重要, 因为 components 的存在让计算 DOM diff 更高效。

react应用情况

国外应用的较多，主要应用于facebook、Yahoo、Reddit等。

react函数组件

无状态组件组件/
视图组件/

function  App{
    return （<></>）
}
export  default  App

react类组件

有状态组件/
容器组件

import  React，{Component}from ‘react’

export default class App extends Component {
    render() {
        return 
           （<></>）
    }
}

react模板语法

1.文本渲染

文本渲染{}

html文本渲染
dangerouslySetinnerHTML={{__html:xxx}}

2.条件渲染

三元运算符号
条件?<>:<>

&&符号
{{条件&&<>}}

3.列表渲染

this.state.list.map(item=><h3 key={item}>{item></h3>)

react事件

1.
和普通js事件一致，需要驼峰式写法

2.

onClick={this.sayHi}

3.

onClick={（）=>{this.sayHi（参数）}}

react更新状态State

1.this.setState（{k:v}）

2.this.setState{{k:v}，（）=>consoloe.log（“执行完毕的回调函数”）}