react入门到进阶（一）
一、何为react
Facebook在F8会议上首次提出这个概念，一套全新的框架就此诞生。
- React 不是一个完整的 MVC、MVVM 框架，其只负责 View 层
- React 跟 Web Components 不冲突
- React 的特点就是“轻”，数据单向绑定，独立、小巧、快速、创新
- 组件化的开发思路，小组件构成大组件，高度可重用
而react则广泛应用于
- 复杂场景下的高性能
- 重用组件库，组件组合
二、react组件基础
1、react虚拟dom概念
当一个数据改变时，而你又需要将它实时反应到UI上时，你就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，于是我们在app源码和DOM之间加入了虚拟DOM（Virtual DOM）。
所以在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。
虚拟DOM是React的一大亮点，具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。如果没有 Virtual DOM，简单来说就是直接重置 innerHTML。这样操作，在一个大型列表所有数据都变了的情况下，还算是合理，但是，当只有一行数据发生变化时，它也需要重置整个 innerHTML，这时候显然就造成了大量浪费。
2、react组件
先来个小例子看看什么是react组件，创建一个js文件
import React from 'react';
import ReactDom from 'react-dom';
export default class ComponentHeader extends React.Component{
render(){
return(
<header>
<h1>yondu is a good father</h1>
</header>
)
}
}
这个文件就创建了一个名为ComponentHeader 的组件，值得注意的是export default是可以让这个组件外用。
然后我们在一个项目的入口文件里引用这个组件
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';//组件文件的相对位置
class Index extends React.Component {
render(){
return(
<ComponentHeader/>
);
}
}//创建可以用ComponentHeader组件的组件Index
ReactDOM.render(<Index/>,document.getElementById('example'));//把你创建的组件在id为example的dom中使用
当然在render中，你也可以用一个参数的形式，它的作用是可以用于判断，例如
var component = <ComponentHeader/>//在render中，就可以直接用component代替<ComponentHeader/>
//所以可以有以下形式
if(ture){
component = <ComponentHeader/>
}
else{
component = <ComponentFooter/>
}
以上例子就是创建一个组件然后使用的过程，需要注意的地方是
- 组件的
return函数里返回的html节点只能是一个，如有多个，可以在外面包一个<div></div> - 如果想让组件外用，加上
export default
3、JSX内置表达式
三元表达式是JSX里面经常使用的一种语法，我们先来看一看
render(){
var text="不为空";
return(
<p>{text == "" ？ "内容为空" : "内容为"+text}/p>
)
}
首先表达式要用{}包裹，然后三元表达式主要是看三元运算符，语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。
(b == 5) ? a="true" : a="false";
在JSX中用动态绑定时，参数需要用{}包裹，而且外面不需要用引号，例如
render(){
var bool=true;
var name="点一下";
return(
<input type="button" value={name} disabled={bool}>
)
}
JSX中的注释是这样{/*注释*/}的形式
4、生命周期
可以利用生命周期函数做到钩子函数（Hook）的很多功能
- 列表项
- component instantiated 组件初始化
- getDefaultProps( ) 获取默认属性的生命周期函数
- getInitialState( ) 获取初始化
State的函数 - componentWillMount( ) 组件将要加载
- render( ) 渲染
- componentDidMount( ) 组件加载完毕（第一次render( )完毕后）
- props changed 属性更改
- componentWillReceiveProps( )
- shouldComponentUpdate( )
- componentWillUpdate( ) 组件将要更新
- render( )
- componentDidUpdate( ) 组件更新完毕（第一次render( )完毕，等组件加载完毕）
- setState( )
- component deleted
- componentWillUnmount( ) 组件卸载函数 （第一次render( )完毕，等组件更新完毕）
我们可以看看
var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
class Index extends React.Component {
componentWillMount(){
//直接写逻辑
console.log("Index组件将要加载的时间");
}
render(){
return(
<ComponentHeader/>
);
}
componentDidMount(){
//直接写逻辑
console.log("Index组件加载完毕的时间");
}
}
ReactDOM.render(<Index/>,document.getElementById('example'));
生命周期函数的运用如上就可见一斑了。
