這篇文章主要的介紹了關於react的基礎語法介紹，還有關於state和props初始化方式的詳解，接下來就讓我們一起來看這篇文章吧
1.什麼是React
# 2.React元件
3 State和Props
4 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 實作了單向回應的資料流，從而減少了重複程式碼，這也是為什麼它比傳統資料綁定更簡單。
因為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主要用於更新介面，元件的State屬性在生命週期函數getInitialState中初始化，當呼叫元件的this.setState改變state的時候，元件會重新渲染刷新。React元件生命週期實例化第一次實例化Props主要用於元件之間傳遞數據，也就是標籤的屬性這裡的pname屬性就可以在MyText中透過this.props.pname得到
var MyTextView = React.createClass( { render:function(){ return <p>content:{this.props.contentText}</p>; } } ); 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"));登入後複製
getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
getInitialState
componentWillMount
render
componentDidMount
元件已存在時的狀態改變
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
componentWillUnmount
作用於元件類，只呼叫一次，傳回物件用於設定預設的props，對於引用值，會在實例中共用。
作用於元件的實例，在實例建立時呼叫一次，用於初始化每個實例的state，此時可以存取this.props。
在完成首次渲染之前調用，此時仍可以修改元件的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使用手册栏目中学习），有问题的可以在下方留言提问。
以上是React基礎語法有哪些？ react的基礎語法的介紹（附實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
