本篇文章主要的介绍了关于react的基础语法介绍，还有关于state和props初始化方式的详解，接下来就让我们一起来看这篇文章吧
React基础语法
1.什么是React 2.React组件 3 State和Props 4 React组件生命周期
1、React
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React使用JSX来代替常规的JavaScript。JSX是一个看起来很像XML的JavaScript语法扩展。
注意
JSX 中HTML标签用小写字母，React组件大写字母开头
属性使用小驼峰命名，第一个单词首字母小写其他大写字母开头
注意HTML标签的属性onclick和onchange等，在JSX中，必须写出onClick，写出小驼峰命名才有效。
为了支持JSX，需要在WebStrom中设置javascript为JSX Harmony
React 特性：
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
2、React组件两种实现方式与不同之处
因为React是一个用于构建用户界面的 JAVASCRIPT 库，所以首先引用三个js文件 ，也可以下载下来再本地引用。
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
<script src="01.js" type="text/babel"></script>
</head>
<body>
<p id="content"></p>
</body>
</html>react.min.js - React 的核心库 react-dom.min.js - 提供与 DOM 相关的功能 babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执 行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package） 一同使用可以让源码的语法渲染上升到一个全新的水平。
2.1 方式一：
class MyTextView extends React.Component{
render(){
return <p>hello react</p>;
}
}
//组件渲染到DOM中
ReactDOM.render(<MyTextView></MyTextView>,document.body);必须继承React.Componet
render()渲染函数是必须的
>必选的方法，创建虚拟DOM，该方法具有特殊的规则：
1、只能通过this.props和this.state访问数据
2、可以返回null、false或任何React组件
3、不能改变组件的状态
4、不能修改DOM的输出
2.2方式二：
var MyTexTiew2 = React.createClass(
{
render:function () {
return <p>hi react</p>;
}
}
);
ReactDOM.render(<MyTexTiew2></MyTexTiew2>,document.body);使用createClass方法，传入对象，结构赋值render等方法和属性
使用这个方式才会执行组件的声明周期函数，才可以访问组件的state和props属性。
State和Props
State主要用于更新界面，组件的State属性在生命周期函数 getInitialState中初始化，当调用组件的this.setState改变state的时候，组件会重新渲染刷新。
Props主要用于组件之间传递数据，也就是标签的属性 这里的pname属性就可以在MyText中通过this.props.pname得到
var MyTextView = React.createClass(
{
render:function(){
return <p>content:{this.props.contentText}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1338" title="紫东太初"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680204118203.png" alt="紫东太初" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1338" title="紫东太初">紫东太初</a>
<p>中科院和武汉AI研究院推出的新一代大模型</p>
</div>
<a href="/ai/1338" title="紫东太初" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>;
}
}
);
var MyViewGroup = React.createClass({
getInitialState:function () {
//生命周期函数，返回一个对象
return {text:""};
},
handleChange:function (e) {
//改变组件的state属性
this.setState({text:e.target.value});
},
render:function () {
return <p>
<MyTextView contentText ={this.state.text}/>
//注意属性onChange大写
<input type="text" onChange={this.handleChange} ></input>
</p>;
}
});
ReactDOM.render(<MyViewGroup/>,document.getElementById("content"));React组件生命周期
实例化
首次实例化
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
实例化完成后的更新
getInitialState
componentWillMount
render
componentDidMount
存在期
组件已存在时的状态改变
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
销毁&清理期
componentWillUnmount
生命周期共提供了10个不同的API。
1.getDefaultProps
作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
2.getInitialState
作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。
3.componentWillMount
在完成首次渲染之前调用，此时仍可以修改组件的state。（想看更多就到PHP中文网React参考手册栏目中学习）
4.render
必选的方法，创建虚拟DOM，该方法具有特殊的规则：
只能通过this.props和this.state访问数据
可以返回null、false或任何React组件
只能出现一个顶级组件（不能返回数组）
不能改变组件的状态
不能修改DOM的输出
5.componentDidMount
真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
在服务端中，该方法不会被调用。
6.componentWillReceiveProps
组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}7.shouldComponentUpdate
组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用
8.componentWillUpdate
接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。
9.componentDidUpdate
完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。
10.componentWillUnmount
组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。
通过集成extends React.Component 给组件初始化不会执行getDefaultProps、getInitialState
只有通过以下方式给组件初始化state和props
1、state的初始化，通过构造函数
//在构造函数中对状态赋初始值
constructor(props){
super(props);//第一步，这是必须的
//不能调用state
this.state = {//第二步，赋初始值
time:0,
on:false,
log:[] //数组
};
}2、props的初始化
class Button extends React.Component{
//静态属性，给属性赋默认值
static defaultProps = {
onClick : null,
className : '',
text : '默认'
};
render(){
return <button className={`Button ${this.props.className}`} onClick={this.props.onClick}>{this.props.text}</button>;
}本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
