JSX & 组件 & State

React

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）一同使用可以让源码的语法渲染上升到一个全新的水平

<script src="../js/react.js"></script>
<!-- 提供全局的 React变量 -->
<script src="../js/react-dom.js"></script>
<!-- 提供全局的 ReactDOM变量 webpack  -->
<script src="../js/babel.js"></script>

helloworld

render渲染

提供要渲染的模板

hello world

该模板要渲染的位置 document.querySelector("#demo")

注意：模板里面仅且只能有一个节点，一个父节点，不能有多个兄弟节点

这是我们react的起手动作

ReactDOM.render(
    <div>hello world</div>,
    document.querySelector("#demo")
)

这是我们react的起手动作

new Vue({})

React vs Vue

React	Vue	jQuery
代码较多20000行	vue10000行
较复杂	精简
{}	{{}}
	指令

JSX

模板语法

JSX = JS + HTML

JSX是react特有的语法

在JS里面放入了HTML结构，这种就是react用到的jsx语法

相对于这个vue，vue是用两个大括号{{}}来渲染数据的

<!-- M -->
data:{
    name:"xxx"
}
<!-- V -->
{{name}}

不好意思，我只用一个大括号{}

<!-- M -->
var data = {
    name:"xxx"
}
<!-- V -->
{data.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

代替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
onkeyup	onKeyup
…

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是自己努力得来的

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])

v-model = onChange + setState

<input type="text" onChange={this.user.bind(this)} />
 
user(e) {
    this.setState({
        user_name: e.target.value
    })
}

react的语法是{}，单向数据绑定

vue的语法是{{}}，双向数据绑定

vue里面

1. data变了，view层通过v-xxx或者{{}}指令，来渲染数据 M->V

2. view变了，你通过v-on或者v-model来把数据从视图层带回数据层 V-M

react里面

1. data变了，是通过函数式编程和{}，来渲染数据 S->V
2. 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>
	}
}

面试题

• react和vue的区别（数据帮绑定单向vs双向，函数式编程和指令）个人开源项目，企业开源项目
• props和state的区别
• 如何定义组件，组件的好处是什么
• getProps和setProps