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';