持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
React 构建用户界面的Javascript库，主要用于构建UI界面。
特点：
1.声明式的设计
2.高效，采取虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作
3.灵活，跟其他库灵活搭配使用
4.JSX,俗称JS里面写HTML,Javascript语法的扩展
5.组件化、模块化开发，代码容易复用，2016年之前大型项目非常喜欢react
6.单向数据流，没有实现数据双向绑定。数据==>视图==>事件==>数据
创建项目
1.通过script引入使用（仅用于学习调试使用）
2.通过react脚手架，创建项目进行开发部署
1）安装脚手架 create react app
cnpm install -g creat-react-app
2）创建项目
creat-react-app 项目名
React元素渲染
let h1 = <h1> helloworld </h1>
使用JSX的写法，可以创建JS元素对象
注意：JSX元素对象，或者组件对象，必须只有1个根元素（根节点）
案例使用：
function clock(){
let time = new Date().toLocaleTimeString();
let element = (
<h1>现在得时间是{time}h1>
)
let root = document.querySelector("#root");
ReactDOM.render(element,root)
}
setInterval(clock, 1000);
函数式组件渲染：
function Clock(props){
return (
<div>
<h1>现在得时间是{props.date.toLocaleTimeString()}h1>
div>
)
}
function run(){
ReactDOM.render(
<Clock date = {new Date()}/> , document.querySelector('#root')
)
}
setInterval(run,1000);
React Jsx
1、由HTML元素构成
2、中间如果需要插入变量用{}包起来
3、{}中间可以使用表达式
4、{}中间可以使用JSX对象
5、属性和HTML内容一样都是用{}来插入
案例：
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
let str = "当前时间是：";
let time = new Date().toLocaleTimeString();
let element=(
<div>
<h1>mememeh1>
<h2>{1+1},{1+2},{7*8},{15/3}h2>s
<h3>{str+time}h3>
div>
)
console.log(element);
let man="好的";
let element2=(
<div>
<h1>今天是否隔离h1>
<h2>{man=="发热"?"隔离":element}h2>
div>
)
let color = 'bgRed'
//HTML的样式类名需要些className，因为class在js中是关键词
let element5 = (
<div className = { color }>
红色背景颜色
div>
)
ReactDOM.render(element5,document.getElementById('root'));
JSX_style表达式
1、class、style中，不可以存在多个class属性
2、style样式中，如果存在多个单词的属性组合，第二个单词开始首字母大写，或者用‘’包起来，否则会报错。
3、多个类共存的操作.
4、注释：
必须在括号的表达式内书写，否则报错：{/*这里写注释*/}
案例：
import React from 'react';
import ReactDOM from 'react-dom';
let exempleStyle = {
borderBottom:"4spx red solid",
background:"skyblue"
}
let classStr2 = ['abcddd ','redbg'].join(" ");
let element = (
<div>
{/*要这么进行注释 */}
<h1 className={classStr2}>
hellow
h1>
div>
)
ReactDOM.render(element,document.querySelector("#root"));
React组件
函数式组件与类组件的区别和使用，函数式比较简单，一般用于静态没有交互事件内容的组件页面。类组件，一般又称为动态组件，那么一般会用于交互或者数据修改的操作。 1、函数式组件 2、类组件 3、复合组件：组件中有其他组件，复合组件中既可以有类组件又可以有函数组件。
//函数式组件定义
function Childcom(props){
let title = <h2>我是副标题h2>;
let weather = props.weather;
let isGo = weather == "下雨" ? "不出门" : "出门";
return (
<div>
<h1>这是一个函数式组件h1>
{title}
<div>
是否出门？
<span>{isGo}span>
div>
div>
)
}
//类组件定义
class HellowWorld extends React.Component{
render(){
return(
<div>
<h1>类组件定义Hellowordh1>
<h2>hello:{this.props.name}h2>
<Childcom weather={this.props.weather}/>
div>
)
}
}
ReactDOM.render(<HellowWorld name="老王" weather="下雨"/>,document.querySelector("#root"));
React State
相当于VUE的DATA，但是使用方式跟VUE不一致
案例：
import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component{
constructor(props){
super(props)
//状态（数据）
//构造函数初始化数据，将需要改变的数据初始化到state中
this.state = {
time:new Date().toLocaleTimeString()
}
}
render(){
return(
<div>
<h1>当前时间：{this.state.time}h1>
div>
)
}
//生命周期函数，组件渲染完成时的函数
componentDidMount(){
setInterval(()=>{
/*
切勿直接修改state数据，直接state重新渲染内容需要使用setState
通过this.setState修改完数据后，并不会立即修改DOM里面的内容，react会在这个函数内容所有设置状态改变后同一对比虚拟DOM对象，再统一修改，提升性能；
小程序也是借鉴react状态管理操作
*/
this.setState({
time:new Date().toLocaleTimeString()
})
console.log(this.state.time);
},1000)
}
}
ReactDOM.render(<Clock/>,document.getElementById("root"));
