React基础整理

前端一直流传着三大框架一大抄的说法，在中国的你或许无时不在感受这vue的强大，但其实react才是三大框架中世界使用了最大的
react官方地址 : http://react.html.cn/docs/getting-started.html
在这里我必须说明，react和vue谁更好是个争论不休的无解题。但所有人都承认的是vue文档更加具体，react的文档就没有那么详细 导致他的操作难度非常大。
npx create-react-app 项目名 可以在node中创建一个react项目
再执行
安装项目依赖

npm install

react项目初始化是没有build目录的，我们可以手动生成build文件目录

npm run build

react和vue一样可以通过

import App from ./App

的形式引入文件
每个react组件都需要继承React.Componen
但我们可把他简化一下

import React, { Component } from “react”
class 组件名 extends Component

render函数负责渲染页面结构 使用方法如下

import React, { Component } from “react”
class CollectSetting extends Component {render(){return (<div>Hello world</div>);}
}

这里需要提一下，其实这个页面结构是相当于写在js里的，然而js里写html结构是需要加双引号的，然而我们采用了jsx的语言，让html结构可以正常的写在jsx里
我这里将jsx标签分两种，一种是正常的html标签 一种是自己定义的组件标签 组件标签用小写开头可是会报错的哦
react和vue一样返回单标签，也就是要用一个标签把所有的元素包起来
Fragment标签就很适合这份工作

import React,{Component, Fragment} from 'react';
class CollectSetting extends Component {render(){return (<Fragment><div>Hello world</div></Fragment>);}
}

constructor(props)函数会在组件生成时触发
可以在这里绑定页面数据

constructor(props){super(props)this.state = {数据}
}

react的state和vue的data基本就是一个概念，主要就是起到一个数据响应的作用

<input value = {this.state.inputValue}/>

在元素中取state中的值
如果你想改变state中的值 例如我改变inputValue 那么你直接

this.state.inputValue = "张三";

这样你会发现你是改变不了他的
因为state有自己的set方法 是不允许你这样随便改的

this.setState({inputValue:”张三”
})

这样就可以了
react给元素定义on事件时 基本就和原生js一样

<input onChange = {this.chan()}/>

就是在标签上声明on事件 但记得首字母大小 例如点击事件 onClick
react的函数不像vue管的那么严谨，它没有特意存放自定义函数的区域
如果是vue循环便利元素相信大家第一时间会想到v-for
react采用ES6语法中的map便利元素 例如this.state.List是一个对象数组，我们可以这样写

<ul>
{this.state.List.map((value, index) => {return (<li key = {index} onClick = {this.puclick.bind(this)}>{value}</li>)})}
</ul> 

循环中你要是不定义key值可是会报错的哦，记住key必须是唯一的不然就会有问题
react中的this指向比较随意 你就要因为走到一个事件中发现拿到this不对了
那你就需要用到bind方法了 改变this指向，这里我就不多做讲解了
class是ES6类的关键字所有不能直接在元素中声明class 可以使用className 替代
表单元素绑定中有一个属性叫for 其又和循环语句有冲突 所有我们要用htmlFor替代 老实说，把js html 样式都弄的这么混乱，我个人是不太循环react的
react的页面结构是不能用html的注释方法注释的
要用

{/*这是一段注释*/}

dangerouslySetInnerHTML就是vue的v-html

<li dangerouslySetInnerHTML = {{__html:”<h1>我的天</h1>”}}></li>

react和vue子组件传值方式基本一样
例如我引入一个Text，并在引用时向子组件传值

import Text from "./Text" 引入组件
<Text come={this.state.value} />

子组件可以直接通过props获取到父组件给的值

<li>{this.props.come}</li>

父组件可以传给子组件方法 子组件在一定条件下定义和调用

//父组件代码
constructor(props){
super(props);this.puclick = this.puclick.bind(this)  //绑定父组件的thisthis.state = {}
}
puclick(i){let Lists = [...this.state.List]Lists.splice(i, 1)this.setState({List:Lists})
}
<Text delete = {this.puclick} />
//在子组件中调用函数

这样子组件就可以调用this.props.delete(this.props.index)了
和vue一样react可以通过ref获取到虚拟dom并操作 (建议只用来查看，dom真的太耗性能了)
因为this.setState是一个异步操作 所以自然可以用异步的方法操作

this.setState(() =>{
return {inputValue:"新的值"}
},() => {
//修改完之后要执行的代码
})

说的react的生命周期那就比vue复杂非常多了

组件初始化基本没有执行周期函数 就定义了constructor(props)的初始数据super(props);
this.state = {}
接下来是页面挂载阶段 会按顺序执行生命周期函数
componentWillMount , render , componentDidMount
需要注意是render是挂载元素的函数就是在render之前执行的函数都是拿不到元素的
如果页面中this.state = {}的数据发生变化 生命周期函数会按顺序执行
shouldComponentUpdate , componentWillUpdate , render , componentDidUpdate
会被执行 注意只有render执行之后页面才会被重新渲染
shouldComponentUpdate 方法可以给出返回值
默认true 如果给了false 执行完shouldComponentUpdate逻辑将停止 不会执行他之后的生命周期函数了
当组件要被移除之前会执行一个生命周期函数
componentWillUnmount
当父组件传递在子组件props里的数据发生变化时就好执行生命周期函数
componentWillReceiveProps , shouldComponentUpdate , componentWillUpdate , render , componentDidUpdate
Ant和react的关系就像vue和elementui一样 所以如果你要用react开发项目 建议引入Ant作为组件的ui插件
Ant Design of React官网如下
https://ant.design/docs/react/introduce-cn
react的路由更vue的路由相比，就像是两种语言的本质差别一样，vue比较严谨规范 react比较随性灵活
我们先导入react路由依赖

npm install react-router-dom --save

然后引入react的路由

import {BrowserRouter, Route} from "react-router-dom";

然后定义路由组件

class Entry extends Component{
constructor(props){super(props);this.state = {}
}render() {return (<BrowserRouter><div><Route path='/' component={Content}/><Route path='/Text' component={Text}/><Route path='/App' component={App}/></div></BrowserRouter>);}
}
ReactDOM.render(
<React.StrictMode>
<Entry />
</React.StrictMode>,
document.getElementById('root')
);

react路由有一个很奇葩的问题 那就是 你要跳转的是 / 结果它匹配到了 /text 这是因为react是一种模糊查询的方式匹配路由的
这是我们需要一个属性Switch
需要注意的是Switch并不是改变模糊查询 而是让路由只匹配一个选项，就是说 当我跳转/ 有第一个叫/ 第二个叫 /text 不加Switch 则两个都会匹配 加了Switch 就只会匹配第一个

import {BrowserRouter, Route , Switch} from "react-router-dom";  引入Switch
<BrowserRouter><Switch><div><Route path='/' component={Content}/><Route path='/Text' component={Text}/><Route path='/App' component={App}/></div></Switch>
</BrowserRouter>

react没有v-if 但有三元表达式的输出标签语法

import {Redirect} from "react-router-dom";
{lage ===1?<Redirect to = "/apcd"/>:<Redirect to = "/app"/>
}