react.png
如今，前端框架Angular，React和Vue逐渐成熟起来，他们三个各显其色,下面我们就先来熟悉轻量级的React吧！！！
React
是什么 （What）
- React是一个JavaScript的UI库，简单来说是MVC中的V
谁提出的，提出的原因（Why & Who）
- React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram的网站，在2013年开源。
特点（How）
- 轻量级的一个库
- 组件化
- 速度快
- 单向数据流
-
跨浏览器兼容（支持IE8）
know-react.png
简单的了解React背景后，接下来我们看看React的一些关键词
React的关键词
- 安装
- JSX语法
- Rendering
- 组件、props、state
- 处理事件
- 生命周期
- 虚拟DOM
安装
- 根据官网直接下载安装包
- 使用包管理器（npm、yarn）安装react
- npm init
- npm install react react-dom
或 - yarn init
- yarn add react react-dom
Hello world
安装完之后，运用React写个“Hello React”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
运行结果：
result.png
从代码中可以看出想在html文件中运行React，需要引入react.js、react-dom.js和browser.min.js这三个文件，浏览器器才能识别React，其次就是script标签的类型应为text/babel,因为React的JSX语法（下面会介绍到），与JavaScript不兼容。
上面这个Hello React简单例子，就是React最基本的HTML模板，至于为什么这样写，浏览器就会出现这样的结果，不要着急，待我娓娓道来。
JSX语法
const element = <h1>Hello React</h1>;
上面这种写法既不是字符串赋值，也不是HTML标签。其被称为JSX语法，是JS的一种扩展。大部分情况下，在React中，我们用JSX来描述界面。JSX就像是一种模板语言，但它也包括JS的全部API。上面的HelloWrold例子中render方法中第一个参数就是用JSX语法写的一个表达式。
Rendering element 渲染元素
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById('example')
);
渲染元素就是用最基本的ReactDOM.render()方法进行渲染。就是将模板（<h1>Hello React</h1>）转换为HTML元素，插入到指定的DOM中去（插入到id为example元素中去）。
code-babel.png
从图片中可以看出，
<h1>Hello React</h1>经过编译后，插入到id为example的div中去。
组件、props、state
组件使得界面分离成独立的，可重复使用的部件。概念上来讲，组件就像是JavaScript函数，他接收任意的输入(被称作props)，且返回渲染页面的元素。
定义组件的方法：JavaScript函数定义、ES6 Class定义
组件有两个核心的概念：props和state
1.props
props是组件的属性，由外部通过JSX属性设置，一旦初始设置完成，就可以认为props是不可修改的。关于props，官网有严格的规则：
All React components must act like pure functions with respect to their props.
所有的组件必须像纯函数一样对待他们的props。
什么是纯函数呢？纯函数就是相同的输入总是返回相同的输出的函数。这就意味着组件的props是不可修改的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
function Hello(props){
return <h1>Hello,{props.name}</h1>
}
ReactDOM.render(
<Hello name="React"/>,
document.getElementById('example')
);
</script>
</body>
</html>
运行结果：
result.png
由此可以看出，运行结果和上面例子的运行结果一样。这个例子是通过写JavaScript方法定义了一个组件，并且组件中添加了一个属性
name,值为React。在Hello组件中可以通过props.name获取name属性的值。上面提到React的props属性是不可修改的，当修改时则会报错。比如在Hello方法中进行修改
function Hello(props){
props.name = "world";
return <h1>Hello,{props.name}</h1>
}
则浏览器就会报错
error.png
提示未知类型错误：不能修改只读对象属性name的值
2.State
state 是组件的当前状态，可以把组件简单看成一个“状态机”，根据状态 state 呈现不同的 UI 展示。一旦状态（数据）更改，组件就会自动调用 render 重新渲染 UI，这个更改的动作会通过 this.setState 方法来触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {liked: false};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({liked: !this.state.liked});
}
render() {
var text = this.state.liked ? "like" : "haven't liked";
return (
<p onClick={this.handleClick}>You {text} this.click to toggle</p>
)
}
}
ReactDOM.render(
<LikeButton></LikeButton>,
document.getElementById('example')
);
</script>
</body>
</html>
运行结果：
havnotliked.png
再次点击后
liked.png
从代码中看出初始化时，
state.liked值为false,当点击<p>标签里的文本时，就会触发click事件，从而调用handleClick方法，在该方法中通过setState来修改state.liked的值。
处理事件
React元素处理事件和DOM元素处理是类似的，但有两点语法上的不同：
- React事件命名遵守驼峰命名规则，而不是小写命名
- 用JSX传递方法作为事件处理，而非字符串形式
生命周期
组件的生命周期分为三种状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
React 提供了五种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
虚拟DOM
React页面加载速度快，就是因为virtual DOM（虚拟DOM）的存在，不直接操作原生DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到DOM中当局部DOM发生变化，页面加载避免全部DOM的重新加载。
网友评论