React入门教程
做前端的人都知道，目前热门前端的框架是 VAR => Vue，Anglur，React。
而如果说最热门的前端框架是谁，毫无悬念是 React
React 是由 Facebook 主导开发的一个 JavaScript 框架。学习 React 需要你拥有基本 JavaScript 和 HTML 知识
接下来让我们开始学习 React ，首先学习如何使用React输出一个 Hello React
一、Hello React
新建一个 Reactdemo.html ，输入以下内容
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script crossorigin src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script crossorigin src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
//我们的React代码在这里
ReactDOM.render(
<h1>Hello, React</h1>,
document.getElementById('root')
)
</script>
</body>
</html>运行试试看！Hello，React！
上面代码一共用了三个库：react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，babel.js 的作用是将 JSX 语法转为 JavaScript 语法。
接下来让我们看看代码，在 ReactDOM.render 函数里 我们看到的是一个类似与XML/HTML的语法，但实际上他不是HTML，它就是基于 JavaScript，在 React 当中的一种语法扩展的实现。例如上面JSX语法经过转换后会变成React创建Element的一个方法。
ReactDOM.render(
React.createElement('h1',null,'Hello, React'),
document.getElementById('root')
)
而 ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点(例子中是id为root的节点)。
二、JSX语法
JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析
JSX表达式
把下面的代码运行试试看！
var str = 'cnyballk'
ReactDOM.render(
<h1>Hello, {str}</h1>,
document.getElementById('root')
)
在{}你可以使用任何js表达式，如果str变量是数组，它还会帮你展开，例：
var str = [1,2,3]
ReactDOM.render(
<h1>Hello, {str}</h1>,
document.getElementById('root')
)
JSX嵌套
在JSX里的标签也可以像 HTML 一样相互嵌套，需要注意的是，JSX 在嵌套时，最外层有且只能有一个标签
var str = 'cnyballk'
ReactDOM.render(
<h1>Hello, {str}
<p>我是p元素</p>
</h1>,
document.getElementById('root')
)
如果是这样就会报错，所以要注意哦~
var str = 'cnyballk'
ReactDOM.render(
<h1>Hello, {str}</h1>
<p>我是p元素</p>,
document.getElementById('root')
)
三、React组件
React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件，React官方对组件的定义是指在UI界面中，可以被独立划分的、可复用的、独立的模块。组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。
新版本的React里提供了两种定义组件的方法:
第一种函数定义组件，我们只需要定义一个接收props传值：
function Hello(props) {
return (<h1>Hello, {props.name}</h1>)
}
第二种是使用ES6的语法，类的概念来定义React组件：
class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>
}
}
这里要注意的是组件的首字母必须是大写，Hello不能写成hello，否则会报错。
那么怎么使用呢：
ReactDOM.render(
<div>
<Hello name="cnyballk1" />
<Hello name="cnyballk2" />
</div>,
document.getElementById('root')
)
组件内嵌套组件
组件也是可以嵌套组件的，对于React来说，一个网页就是由不同的组件组合而成，组件互相包含
class Hello extends React.Component{
render (){
return <div>
{
this.props.children.map(function (child) {
return <h1>Hello,{child}</h1>;
})
}
</div>
}
}
class Name extends React.Component{
render(){
return <span>{this.props.name}</span>
}
}
ReactDOM.render(
<Hello name="cnyball1">
<Name name="cnyballk1"/>
<Name name="cnyballk2"/>
</Hello>,
document.getElementById('root')
)
是不是很好奇props是什么？别急，接下来就为你讲解
四、Props
props其实就是属性Properties的缩写。
组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取
添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
props是只读的
在React中，props都是自上向下传递，从父组件传入子组件。并且props是只读的，我们不能在组件中直接修改props的内容。也即是说组件只能根据传入的props渲染界面，而不能在其内部对props进行修改。
props类型检查
组件的属性可以接受任意值，字符串、对象、函数等等。但是有时我们需要一种机制，为了避免错误类型的内容传入，我们可以为props添加类型检查。
五、State状态
组件免不了要与用户互动，而state就好比状态机，保存着组件的状态，下面通过一个计数器的例子来说下state的用法以及需要注意的地方：
class Button extends React.Component{
constructor(props){
super(props)
this.state = {
num:1
}
this.handlerClick = this.handlerClick.bind(this)
}
handlerClick(){
this.setState({num:this.state.num+1})
}
render (){
return <button onClick={this.handlerClick}>{this.state.num}</button>
}
}
ReactDOM.render(
<Button />,
document.getElementById('root')
)
在React中我们通过类定义组件声明一个有状态的组件，在构造方法初始化state，之后可以用过this.state来访问它，初始化state之后，如果我们想改变它，是不可以直接对其赋值的，直接修改state的值没有任何意义，不会触发组件的重新渲染。
所以需要this.setState这个方法，在改变state的同时，触发React内部的一系列函数，最后调用 this.render 方法，再次渲染组件。
六、组件的生命周期
组件有以下生命周期
- componentWillMount
组件即将挂载 - componentWillReceiveProps
组件即将接收props - shouldComponentUpdate
返回是否需要更新组件的判断 - componentWillUpdate
组件即将更新 - componentDidMount
组件已挂载 - componentDidUpdate
组件已更新 - componentWillUnmount
组件即将卸载
为了更好的方便理解生命周期，让我们来看看是生命周期是如何流转的：
class Nums extends React.Component {
constructor(props) {
super(props)
console.log(`子组件构造函数触发`)
}
componentWillMount() {
console.log(`组件即将挂载`)
}
componentDidMount() {
console.log(`组件已挂载`)
console.log(` `)
}
componentWillReceiveProps(newProps) {
console.log(`组件即将接收props`)
}
componentWillUpdate(nextProps, nextState) {
console.log(`组件即将更新`)
}
componentDidUpdate(prevProps, prevState) {
console.log(`组件更新完毕`)
console.log(` `)
}
componentWillUnmount() {
console.log(`组件即将卸载`)
}
shouldComponentUpdate(newProps, newState) {
console.log(`返回判断是否要更新组件true`)
return true;
}
render() {
console.log(`组件渲染中`)
return <h1>{ this.props.counter }</h1>
}
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
counter: 0
}
console.log(`父组件构造函数触发`)
console.log('this.state', this.state.counter)
}
upCounter() {
console.log('改变前的counter', this.state.counter)
this.setState((prevState) =>({
counter:(function(){
console.log('改变后的counter', prevState.counter + 1)
return prevState.counter + 1
})()
}))
}
render() {
console.log(`父组件渲染中`)
console.log('准备传入的counter', this.state.counter)
return (
<div>
<Nums counter={this.state.counter} />
<button onClick={() => this.upCounter()}>+1</button>
<button onClick={() => this.forceUpdate()}> 更新组件</button>
<button onClick={() => {ReactDOM.unmountComponentAtNode(document.getElementById('root'))}}>
卸载组件
</button>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
打开控制台，点击按钮，便可以看到我们的生命周期流转的状态。
了解React组件渲染的流程和原理对我们更深入React非常有帮助,如果你需要发起AJAX来获取数据渲染，可以放在合适的生命周期里。
总结
React到这里就结束了，尽管没有很深入去React，但是如果你认真看了并且去学习，你就已经能够使用React去写一些小demo了，如果你有什么问题，可以留言给我，如果我看到了，我会回复的。
下次我会更加深入的去讲解React
上一篇： 金国从巅峰到低谷只有三十年时间 金国的灭亡值得同情吗
下一篇： HTTP与TCP的区别和联系