前端一直流传着三大框架一大抄的说法,在中国的你或许无时不在感受这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) //绑定父组件的this
this.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"/>
}