中文文档 https://react.docschina.org/
是跟 Vue 很相似的一套框架,它Facebook写的
在国内,它使用范围没 Vue 那么广
React最有学习价值,历史地位非常高的
- 声明式 v-text {{}} M->V
- 组件化 Vue.component() .vue文件
安装
Facebook开源框架
react.min.js //React 的核心库
react-dom.min.js //提供与 DOM 相关的功能
babel.min.js // Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平
helloworld
render渲染,提供要渲染的模板<div>hello world</div>
该模板要渲染的位置 document.querySelector("#demo")
注意:模板里面仅且只能有一个节点,一个父节点,不能有多个兄弟节点,这是我们react的起手动作
ReactDOM.render(
<div>hello world</div>,
document.querySelector("#demo")
)
JSX
模板语法
JSX = JS + HTML
JSX是react特有的语法
在JS里面放入了HTML结构,这种就是react用到的jsx语法
相对于这个vue,vue是用两个大括号{{}}来渲染数据的
<!-- M -->
data:{
name:"xxx"
}
<!-- V -->
{{name}}
函数式编程
进来,然后通过函数里面的(算法等乱七八糟)的处理,返回给你的东西
指令v-text,v-html,v-model,v-if,v-show,本质是接受数据,返回对应的视图
函数式编程其实是指令的另一种呈现
可以模拟一切vue的指令
V = T(M)
function people(name){
return name
}
//视图层 = people(数据层)
渲染数组
//相当于vue里面v-for指令
<!-- 数据 -->
let data = {
arr:[
<p key='1'>a</p>,
<p key='2'>b</p>,
<p key='3'>c</p>
]
}
<!-- 视图 -->
<div>{data.arr}</div>
<!-- 转化为以下内容 -->
<div>
<p key='1'>a</p>
<p key='2'>b</p>
<p key='3'>c</p>
</div>
style
style接受的是对象,相当于v-bind:style
或者:style
fontSize这种要驼峰写法
<div style={{
display: "none",
fontSize: "14px"
}}></div>
属性
相当于vue里面的v-bind:xxx
<div name={data.name}>
hello world
</div>
由于属性值class是关键词,避免和JS里面冲突,如果属性值出现下面两个的话,要进行转换
React | |
---|---|
class | className |
for | htmlFor |
<img src={data.src} />
<p className=""></p>
<label htmlFor="" />
渲染html结构
代替v-html
尽量少用,放置xss攻击
<!-- data -->
html: '<p>123<span style="color:red">456</span>789</p>'
<!-- view -->
<div dangerouslySetInnerHTML={{__html:data.html}}></div>
v-if
代替Vue中v-if
指令
<div>{
(()=>{
if(data.bool){
return <p>真</p>
}
})()
}</div>
v-on
监听事件,原生的写法onclick
而react
需要on
之后的那个字母大写onClick
原生 | React | Vue |
---|---|---|
onclick | onClick | @click / v-on:click |
onchange | onChange | |
onmouseover | onMouseOver |
let methods = {
test(e){
console.log(e.target)
console.log("你好")
}
}
<div>
<button onClick={methods.test}>ok</button>
</div>
this的指向
onClick={this.test}
这里是不能用加括号的这种方式来传参onClick={this.test(params)}
并且这样写之后this.test
里面的this
会是undefined
在react
,函数带参数是要配合bind
方法,通过bind
获取this
和参数
<button @click="test()">ok</button>
<button onClick={this.test}>ok</button>
<!-- 参数 -->
<button onClick={this.test.bind(this,参数)}>ok</button>
组件
分治,方便管理,减少耦合
复用,提高效率,性能
组件的本质其实是函数,最简单的组件可以使用函数来定义,组件首字母必须是大写
var Xheader = (props) => {
return <header>微博</header>
}
ReactDOM.render(
<div>
<Xheader />
<Xheader />
</div>,
document.querySelector("#demo")
)
以ES6定义类的方式去生命组件是最常用的,也是我建议用的方法
class Xheader extends React.Component {
constructor(props){
super(props)
}
render() {
return <header>微信</header>;
}
}
ReactDOM.render(
<div>
<Xheader />
<Xheader />
</div>,
document.querySelector("#demo")
)
props
props
是继承父一辈的东西
父子组件通信的话,首选props
,父子,不推荐用在隔代遗传(父传孙子)
如果需要让同一个组件呈现不同的状态,可以考虑用props来解决,父组件往子组件的属性值上面定义一个值,然后该子组件就可以接受该值呈现对应的状态
class Xheader extends React.Component {
constructor(props){
super(props)
console.log(props);
this.props = props;
}
render() {
return <header>{this.props.title}</header>;
}
}
ReactDOM.render(
<div>
<Xheader title="微信" />
<Xheader title="支付宝" />
</div>,
document.querySelector("#demo")
)
ReactDOM.render
这个老爸,把微信和支付宝分别传给两个不同的儿子<Xheader>
,这两个儿子通过自身的props
来吸收,然后转化自己的属性值显示
state
state
在程序里面一般是通过ajax
来向后端要的,或者自己写死的
state
是组件自己独有的数据,它不受外界影响,它的数据一般来说是自己提供,并且自己触发更改
相对props
是不一样,props
是祖传下来的
vue MVVM 数据变视图变,视图变数据变
react SV (state,view) 状态变视图变,但是视图变状态不变
一般来说,我们说的数据驱动,大部分是指(vue的data)或者(react的state),但是它只是数据的代言人,它不能代表全部,真正的数据指的是类组件里面,所有的props,state
和函数等
class Xheader extends React.Component {
constructor(props){
super(props)
// 父传子 老爸给我的
this.props = props;
// 自己拥有的 就是vue组件里面data
this.state = {
"title":"微信"
};
}
render() {
return <header>{this.state.title}</header>;
}
}
ReactDOM.render(
<div>hello world</div>,
document.querySelector("#demo")
)
setState数据修改
格式:setState(nextState[,callback])
react
双向数据绑定需要onChange
配合 setState
<input type="text" onChange={this.user.bind(this)} />
user(e) {
this.setState({
user_name: e.target.value
})
}
react的语法是{},单向数据绑定
vue的语法是{{}},双向数据绑定
vue里面
- data变了,view层通过v-xxx或者{{}}指令,来渲染数据 M->V
- view变了,你通过v-on或者v-model来把数据从视图层带回数据层 V-M
react里面
- data变了,是通过函数式编程和{},来渲染数据 S->V
- view变了,通过事件触发setState来更改数据层 V->S
//在同一生命周期,数据qty的修改需要依赖修改后的数据num, 建议用setState()的函数回调,因为setState()修改数据需要时间,例如以下代码
import React, { Component } from 'react';
export default class Rolling extends Component {
constructor(props) {
super(props);
this.state = {
num : 8,
qty: 5
}
}
upd_num() {
this.setState({
num: this.state.num + 1
}, () => {
this.setState({
qty: num * 243
})
})
}
render() {
return (
<div>{this.upd_num()}</div>
}
}