@rg070836rg 2018-03-11T08:54:14.000000Z 字数 4531 阅读 1184

React

react

whats

创建可复用的web组件
只提供mvc中的v层

why

组件化，无需模板
比较容易理解（js逻辑和html紧密连接,可以在js中写html，无需以字符串或者url）
单项数据流：数据一旦更新，重新直接渲染整个app！

react渲染方式（单项数据流）：

用户输入-->从api获得数据-->传输数据给顶层组件-->react渲染组件（依次下传）

虚拟dom树

重建dom树
查找差异
计算需要更新的部分
批量更新

JSX

基于js的XML语法扩展？？

实践

官方主页：
https://reactjs.org

安装node.js （win环境）
https://nodejs.org/en

可参考
http://blog.csdn.net/xxmeng2012/article/details/51492149
http://www.runoob.com/nodejs/nodejs-http-server.html

本次实践，不追求详解。

安装完之后，通过cmd，查看安装状态
node -v
npm -v
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

C:\Users\chen>node -v
v8.10.0
C:\Users\chen>npm -v
5.6.0

开发环境，webstorm+chrome

由于npm的国外速度很慢，切换成淘宝的

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

以后使用
cnpm install [name]
支持主页：http://npm.taobao.org/

快速构建react环境

cnpm install -g create-react-app
cd C:\Users\chen\WebstormProjects\first
create-react-app my-app
cd my-app/
npm start

尝试修改 app.js，效果如下

image.png-19.4kB

React JSX:React 使用 JSX 来替代常规的 JavaScript。

WHY JSX:

1.执行更快
2.编译可以发现错误
3.编写模板更快

简单学习：（缺少html的知识~）

推荐使用内联样式表：

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
//内联样式表
var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
class App extends Component {
  render() {
    return (
        <h1 style = {myStyle}>HELLO</h1>
    );
  }
}
export default App;

内嵌数组：数组会自动展开所有成员,也可以指定使用

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
var arr = [
    <h1>11111</h1>,
    <h2>22222</h2>,
];
class App extends Component {
  render() {
    return (
        <div>{arr}</div>
    );
  }
}
export default App;

React,可以渲染 HTML标签或 React组件
区别就在于，变量名大小写，例子如下
var myDivElement = ;
var MyComponent = React.createClass({/.../});

ps 注意：嵌套多个 HTML 标签，需要使用一个标签元素包裹它

 render() {
    return (
        <section>
            <h1>这是正确的例子</h1>
            <span>假设这里是标题下面的内容</span>
        </section>
    );
  }
render() {
    return (
        <h1>这是错误的例子</h1>,
        <span>假设这里是标题下面的内容</span>
    );
  }

！！编写react 组件新版及其调用：不推荐 require

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
//!!!!!!
class HelloMessage extends Component {
    render(){
        return <h1>Hello World！</h1>;
    }
}
class App extends Component {
  render() {
    return (
        <HelloMessage/>//!!!!!!!!!
    );
  }
}
export default App;

A EXAMPLE

import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';
class Timer extends Component {
    //构造器
    constructor(props) {
        super(props);
        this.state = {seconds: 0};
    }
    tick() {
        this.setState(prevState => ({
            seconds: prevState.seconds + 1
        }));
    }
    //组件加载时，触发的事件
    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
    }
    //事件：组件注销，清除定时器
    componentWillUnmount() {
        clearInterval(this.interval);
    }
    render() {
        return (
            <div>
                Seconds: {this.state.seconds}
            </div>
        );
    }
}
class App extends Component {
    render() {
        return (
            <Timer/>
        );
    }
}
export default App;

外部参数模式：

import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';
class HelloMessage extends Component {
    render() {
        return <h1>Hello {this.props.name}</h1>;
    }
}
class App extends Component {
    render() {
        return (
            <HelloMessage name="Runoob"/>
        );
    }
}
export default App;

复合组件

import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';
class WebSite extends Component {
    render() {
        return (
            <div>
                <Name name={this.props.name}/>
                <Link site={this.props.site}/>
            </div>);
    }
}
class Name extends Component {
    render() {
        return (
            <h1>{this.props.name}</h1>
        );
    }
}
class Link extends Component {
    render() {
        return (
            <a href={this.props.site}>
                {this.props.site}
            </a>
        );
    }
}
class App extends Component {
    render() {
        return (
            <WebSite name="少儿编程" site=" http://www.helloworldroom.com"/>
        );
    }
}
export default App;

React State(状态)
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';
class LikeButton extends Component {
    //构造器
    constructor(props) {
        super(props);
        this.state = {liked: false};
        // ！！！！这个绑定是必要的，要不然该事件中的this就会是当前实例！！！！！！
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick (){
        console.log(111)
        this.setState(prevState => ({
            liked: !prevState.liked
        }));
    }
    //或者使用箭头函数
    // handleClick= () =>{
    //     console.log(111)
    //     this.setState(prevState => ({
    //         liked: !prevState.liked
    //     }));
    // }
    render() {
        var text = this.state.liked ? '喜欢' : '不喜欢';
        return (
            <p onClick={this.handleClick}>
                你<b>{text}</b>我。点我切换状态。
            </p>
        );
    }
}
class App extends Component {
    render() {
        return (
            <LikeButton />
        );
    }
}
export default App;

State 和 Props 混用

import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';
class WebSite extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "菜鸟教程",
            site: "http://www.runoob.com"
        };
    }
    render() {
        return (
            <div>
                <Name name={this.state.name} />
                <Link site={this.state.site} />
            </div>
        );
    }
}
class Name  extends Component {
    render() {
        return (
            <h1>{this.props.name}</h1>
        );
    }
}
class Link extends Component {
    render() {
        return (
            <a href={this.props.site}>
                {this.props.site}
            </a>
        );
    }
}
class App extends Component {
    render() {
        return (
            <WebSite />
        );
    }
}
export default App;