React 部分

React 部分
React 入门和进阶

React介绍

React.js是前端三大新框架：Angular.js、React.js、Vue.js之一，这三大新框架的很多理念是相同的，但是也有各自的特点。

React起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React可以作为一个js库来使用，我们在页面上引用相关的js文件，就可以使用它来做一些页面效果。

React也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)应用系统。

React 文档

React使用文档可以通过如下地址查看： http://react.css88.com/docs/getting-started.html

快速开始

首先通过将React作为一个js库来使用，来学习React的一些基本概念，在页面上引入已经下载好的三个js文件，就可以使用React了。
```
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
```
其中，前两个js文件是React的核心文件，第三个js文件是一个转换编译器，它能将ES6语法及jsx语法转换成可以在浏览器中运行的代码。

编写hello world程序
```
<div id="root"></div>
<script type="text/babel">    
    ReactDOM.render(
        <h1>Hello world!</h1>,
        document.getElementById('root')
    )   
</script>
```
上面编写的，不是真正的JavaScript代码，因为上面是JavaScript代码和html的混合，按照原来的原则浏览器是不会认识这种编码方式的，所以它的类型需要写成“text/babel”，最终通过编译器编译成浏览器可以执行的js。这种将js和HTML文件在写一起的写法是为了构成一个单独的组件，在不同页面可以单独使用，提高封装度

JSX语法

jsx语法是一种类似于html标签的语法，它的作用相当于是让我们在JavaScript代码中直接写html代码，但是jsx不完全是html，它是 JavaScrip 的一种扩展语法，它具有 JavaScript 的全部能力，我们还可在jsx代码中插入变量或者表达式，用jsx语法写出来的语句是一个对象，我们可以将它存为一个变量，这个变量作为ReactDOM对象的render方法的第一个参数。
```
let el = <h1>Hello world!</h1>;
ReactDOM.render(
    el,
    document.getElementById('root')
)
```
jsx的结构还可以写得更复杂，可以是嵌套结构，如果是嵌套结构，需要有唯一的一个外层标签。标签中如果是单个的标签，在结尾要加“/”,在jsx中可以通过“{}”插入变量，表达式或者函数调用。
```
<script type="text/babel">
    let iNum01  = 10;
    let sTr = 'abc123456';
    function fnRev(s){
        return s.split('').reverse().join('');
    }    
    let el = (
        <div>
            <h3>jsx语法</h3>
            {/* 插入变量及运算 */}
            <p>{ iNum01+5 }</p>
            {/* 插入表达式 */}
            <p>{ sTr.split('').reverse().join('') }</p>
            {/* 插入函数调用 */}
            <p>{ fnRev(sTr) }</p>
            {/* 插入三元运算表达式 */}
            <p>{ ok?'YES':'NO' }</p>                
        </div>
    );

    ReactDOM.render(
        el,
        document.getElementById('root')
    )

</script>
```
jsx中指定标签的属性值建议用双引号，不能不用引号，属性名建议用驼峰式，其中class属性需要写成className，属性值如果是可变的，也可以写成“{}”的形式，里面可以和上面写法一样。标签如果是单个的，在结尾一定要加“/”
```
{/* 定义class */}
<p className="sty01">使用样式</p>
{/* 单个标签，结尾要加“/” */}
<img src={user.avatarUrl} />
```
如果一个标签当中想要加入两段不同的内容，则需要在标签内对不同内容分别加入大括号，再分别就两段不同内容在不同的大括号内进行编写，示例如下：
```
<p>{ iNum01+5 }{ sTr.split('').reverse().join('') }</p>
```
如果在有连接的标签当中，需要引入连接相关的变量，在标签中则需要将" "去掉，改为{ },然后将连接的对应变量正常写入大括号当中，示例如下：
```
<script type="text/babel">
    let url = "http://www.baidu.com"
    let el = (
        <div>
            <a href={url}>这是一个链接</a>        
            ...
        </div>
    );

    ReactDOM.render(
        el,
        document.getElementById('root')
    )

</script>
```
jsx语法当中的注释：

　　在大括号 { } 内加入一队 /* */ 内容写在中间，示例如下：
```
{/* 插入变量及运算 */}

{/* 插入表达式 */}
```
```
{/* 插入函数调用 */}
```
```
{/* 插入三元运算表达式 */}
```
关于运行过程当中速度慢的问题：

　　由于在开发过程当中，每次测试运行都需要进行编辑过程，所以速度较慢，但在正式生产环境当中则是编译好的，所以无需顾虑。

组件和属性(props)

组件可以理解成是一个组成页面的部件或者零件，每个部件都有自己完整的结构和功能，多个部件拼装在一起就可以组成一个页面，从组件的实现来看，组件最终是要返回一个jsx对象，不过它和jsx对象的区别是，它在jsx对象的基础上，还带有自己的方法和属性，能完成它自己的交互功能。组件有两种定义方式：一种是函数式定义，一种是类定义。

函数式定义组件

通过函数来定义一个组件，组件名称首字母要大写，函数接收一个参数props，返回一个jsx对象。其中，name属性是在渲染组件时，通过定义属性传入进来的。
```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```
类方式定义组件

上面的组件可以通过下面ES6的类的方式定义，定义的类都要继承于React对象中的Component类，这个定义的组件和上面的功能是等效的。
```
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
```
组件渲染

组件渲染和jsx对象一样，我们可以通过ReactDOM.render()方法来渲染组件。
```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
let element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
```
组件组合

可以在一个组件内，拼装其他的组件，从而组合成一个更大的组件
```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
```
绑定事件

React绑定事件和JavaScript中的行间事件类似，事件绑定是写在标签中的，但是，React事件是在原生事件的基础上做了封装，它的事件使用驼峰命名，而不是全部小写，既 onClick。事件需要传递一个函数作为事件处理程序，这个函数在哪里定义呢？我们可以通过类定义组件，将这个函数作为一个方法定义在组件中。

定义一个点击能弹出名称的组件：
```
class Helloname extends React.Component {
   fnHello(){
       alert('Hello,Tom');
   }
   render(){
       return (
           <input type="button" value="打招呼" onClick={this.fnHello} />
       )
   }
}

ReactDOM.render(<Helloname />, document.getElementById('root'));
```
如果想把这个组件定义成可以传递名称参数的，可以定义如下：
```
class Helloname extends React.Component {
   fnHello(){
       alert(this.props.name);
   }
   render(){
       return (
           <input type="button" value="打招呼" onClick={this.fnHello.bind(this)} />
       )
   }
}

ReactDOM.render(<Helloname name="Tom" />, document.getElementById('root'));
```
需要注意的是，按钮在调用方法时，此时的this默认会指向这个按钮，所以在绑定事件时，需要绑定this，将this指向当前对象。

状态

组件如果需要定义默认属性呢？而且这个默认属性还是可变的呢？这个就是组件的状态属性了，状态属性默认名称是state，这个属性需要在组件定义时初始化，所以我们需要使用类的构造函数来对这个属性进行初始化。

定义一个点击按钮数字递增的
```
class Increase extends React.Component {
    constructor(props){
        super(props);
        this.state = {iNum:10};
        // 也可以在组件初始化时将方法绑定this
        this.fnAdd = this.fnAdd.bind(this);
    }
    fnAdd(){
        // 使用setState来改变state中的值
        this.setState(prevState=>({
            iNum:prevState.iNum+1
        }));
    }
    render(){
        return (
            <div>
                <p>{ this.state.iNum }</p>
                <input type="button" onClick={this.fnAdd} value="递增" />
            </div>
        );
    }
}

ReactDOM.render(
    <Increase />,
    document.getElementById('root')
);
```
state注意点

1、不能直接修改state的值，应该用setState代替
```
// 下面写法是不会更新组件，是错误的
this.state.iNum = 11;

// 应该写成setState的形式
this.setState({iNum: 11});
```
2、state的值可能是异步的，如果需要在state的值的基础上修改得到新的值，可以使用函数的形式，函数的参数中传递的第一个参数是state上一个状态的值，我们可以在这个值基础上修改，下面的prevState代表state上一个状态的值。
```
this.setState(prevState=>({
    iNum:prevState.iNum+1
}));
```
列表渲染

如何拼装数组中的数据放入页面呢？可以将数组中的数据通过数组遍历渲染成一个jsx对象，在通过React渲染这个对象就可以了。
```
let aList = ['红海','复联3','碟中谍6','熊出没'];

let el = aList.map((item,i)=>
    <li key={i}>{ item }</li>
);

ReactDOM.render(
    <ul>{el}</ul>, 
    document.getElementById('root')
);
```
通过map方法遍历数组中的成员，map方法的第一个参数是数组当中的元素参数，第二个参数是数组中的索引值，在循环生成li结构时，需要给每个li加上一个key，这个key的值可以用数组中的成员索引值。

表单数据绑定

表单元件对应着数据，而且这些数据都是变化的，所以我们会将表单元件的数据对应于组件中的state属性值，让它们之间的值实现双向数据绑定的效果，要实现这个效果，需要在表单元件上绑定onchange事件，来将state中的值改变为表单元件中的值，同时也需要将表单的value属性值，设置为等于state中的属性值。

表单数据绑定示例：
```
class Myform extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            uname:''
        };
    }
    // ev指的是系统自动产生的事件对象
    // ev.target指的是发生事件的元素
    fnNameInput(ev){
        this.setState({
            uname:ev.target.value
        })
    }
    render(){
        return(
            <form>
                <p>用户的名称是：{ this.state.uname }</p>
                <input type="text" value={this.state.uname} onChange={this.fnNameInput.bind(this)} />                                        
            </form>
        );
    }
}

ReactDOM.render(
    <Myform />, 
    document.getElementById('root')
);
```
React 提高

生命周期方法

生命周期方法，指的是在组件初始化后，以及组件销毁时，会自动执行的两个方法，我们可以在初始化方法中执行获取数据的操作，在组件销毁方法中执行一些清除操作，比如清除定时器等操作。这两个方法分别是：componentDidMount 和 componentWillUnmount。

使用示例：
```
class Hello extends React.Component{
    constructor(props){
        super(props);
        this.state = {}
    }
    // 组件初始化时自动执行的方法    
    componentDidMount() {
        console.log('componentDidMount');
    }
    // 组件销毁时自动执行的方法
    componentWillUnmount(){
        console.log('componentWillUnmount'); 
    }
    render(){
        return (
            <h1>Hello world!</h1>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById('root'));

setTimeout(() => {
    ReactDOM.render(<h1>切换组件</h1>,document.getElementById('root')); 
}, 2000);
```
数据交互

React没有集成ajax功能，要使用ajax功能，可以使用官方推荐的axios.js库来做ajax的交互。 axios库的下载地址：https://github.com/axios/axios/releases

axios使用方法

常用参数：
1、url 请求地址
2、method 请求方式，默认是'GET'，常用的还有'POST'
3、responsetype 设置返回的数据格式，常用的是'json'格式，也可以设置为'text'或者'html'
4、params 设置发送给服务器的数据
5、then 设置请求成功后的回调函数
6、catch 设置请求失败后的回调函数

axios完整写法：
```
axios({
  url: '/user/12345',
  method: 'get',
  responsetype:'json',
  params: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
```
```
axios请求的写法也写成get方式后post方式。
```
执行get请求
```
// 为给定 ID 的 user 创建请求
// then是请求成功时的响应，catch是请求失败时的响应

axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});


// 可选地，上面的请求可以这样做
axios.get('/user', {
  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
```
执行post请求
```
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
```
脚手架开发

脚手架开发指的是react提供了完整的自动化开发工具及规划好了开发一个应用的项目目录，这些工具是通过nodejs开发的，我们可以通过npm(nodejs包管理命令)来安装这些工具，同时可以通过这个工具生成一个应用的项目目录。

安装脚手架工具

脚手架工具是nodejs的一个包，安装这个工具之前需要先安装nodejs，然后在终端执行以下命令：
```
1、设置npm淘宝镜像
npm config set registry https://registry.npm.taobao.org

2、安装
npm install -g create-react-app
生成应用项目目录

3、生成app
create-react-app my-app

4、启动
cd my-app
npm start

5、生成上线文件
npm run build
```
项目目录说明

以上是执行生成命令自动生成的项目目录，对应的文件夹作用如下：
目录一：src目录，主开发目录，里面包含所有项目的组件，开发组件都是基于此目录
目录二：public目录，项目入口文件目录，目录中的文件不用动
目录三：项目开发依赖包文件目录，项目安装的包都会自动安装在这个文件夹中
目录四：build目录，项目上线时，执行npm run build生成的目录，这里面是自动化工具生成的上线文件

安装axios模块
```
1、在终端的项目目录，执行如下命令
```
```
npm install axios
```
```
2、在模块文件中引入
```
```
import axios from 'axios';
```
相关阅读:
scala-class
uva-10422-骑士-搜索题
 HDU 5724
HDU 5728
CodeForces 414B
CodeForces 698A
Codeforces Round #363 (Div. 2)
BestCoder 2nd Anniversary 1001 Oracle
BestCoder 2nd Anniversary 1002 Arrange
HDU 4798
原文地址：https://www.cnblogs.com/Leon27-29/p/11773189.html

React 入门和进阶

React介绍

React 文档

快速开始

编写hello world程序

JSX语法

jsx语法当中的注释：

组件和属性(props)

函数式定义组件

类方式定义组件

组件渲染

组件组合

绑定事件

状态

state注意点

列表渲染

表单数据绑定

React 提高

生命周期方法

数据交互

axios使用方法

axios完整写法：

执行get请求

执行post请求

脚手架开发

安装脚手架工具

项目目录说明

安装axios模块