摘要：是目前比較火一個前端框架由開發維護。這篇文章我將持續更新來總結使用的各個技術棧與基礎知識。這樣我們就需要把組件代碼抽離出來形成多帶帶的文件組件的生命周期以及相關鉤子待更新。。。

react是目前比較火一個前端框架,由fackbook開發維護。它充分利用了組件化的思想使得網頁開發變得更加簡潔高效，大大提高了分工協同以及代碼的可維護性。

這篇文章我將持續更新來總結react使用的各個技術棧與基礎知識。

react環境搭建步驟詳解

示例:給div id="example"顯示一句hello react

import React from "react"
import {render} from "react-dom"
render(
hello,react
,
document.getElementById("example"))

react 的基礎知識十分簡單,就只是需要掌握jsx的基本原理就可以寫出一個示例demo。
以輸出一個‘hello,world’示例說明
例如屏幕上輸出一個react is very awesome!

首先導入react-dom里面的render方法
確定入口的組件的掛載位置

//entry index.jsx
import React from "react"
import {render} from "react-dom"
render(
react is very awesome!
,
document.getElementById("example"))

這種把模板直接嵌套在js語句中當表達式就是jsx語法.
render函數會把某個react組件或jsx模板掛載到html中id==example 的dom元素上。但是如果你想react組件模板中再寫一行字
i like react
使用如下方法

const str=
react is very awesome!
i like react
這樣就會報錯！
jsx elements必須在一個可以閉合的標簽元素中
說白了react模板必須有一個父元素，并且僅有一個作為根節點。
改為如下方法，
const str=(
hello,world
i like react 
)
render(str,
document.getElementById("example"))
our react demo works again!
{}可以插入js表達式
插入變量，
例如將h2中的字符提取到外部變量中

const title="react is awesome!"
  
{title}


插入三元運算符boolean?true_to_execute:false_to_execute
indicate whether show or not by a variable isShow which type is boolean

 const isShow=false
 {isShow?
i like react 
:""}
這樣可以實現類似angular *ng-if指令中的選擇性顯示隱藏元素。
插入函數表達式
例如利用array.map 根據數據實現循環展示某個tag

render(){
 const todolist=["eat","rest","go to company","sleep"]
 return (

    {todolist.map((item,index)=>
{item}
)}
  
)
}
值得注意的是，循環渲染某個元素必須給元素指定key屬性不同的值，方便react性能優化。
設置元素樣式
設置className 添加stylesheet 類名
由于class是jsz中的關鍵字，我們的模板是寫在js語句中的，所以jsx模板中的class必須改為className，通過這樣方法改變元素樣式

i like react 
直接設置style
設置style必須設置為js字面量對象不能用字符串標識，所有的短線命名，必須改為駝峰命名

{title}
font-size->fontSize //convert to  camelize
自定義react組件
繼承React.Component然后組件里面的render方法必須實現，返回值是jsx語法形式的視圖模板
// define your own component via extending  a React.Component
import React from "react"
class Mycomponent extends React.Component{
render(){
  const title="react is awesome!"
  const isShow=true
  const todolist=["eat","rest","go to company","sleep"]
  return (

  
{title}
  {isShow?
i like react 
:""}
  
todos below
  

    {todolist.map((item,index)=>
{item}
)}
  

  )
}
}
添加事件監聽
事件屬性也必須采用駝峰命名，先在自定義組件中定義事件回調方法
然后在事件屬性上添加回調，如果用到了this一定要bind(this),不然默認指向undefined
示例：雙擊h2 tag,控制臺顯示消息 i"m clicked by users
//in your component
handleClick(){
  console.log("I"m clicked by users!")
}


根據es6 import export default分離組件到其他文件
如果一個模塊中組件過多，代碼量大不利于維護，也不利于分工協同。這樣我們就需要把組件代碼抽離出來形成多帶帶的文件
//src/components/MyComponent/index.jsx
import React from "react"
export default class Mycomponent extends React.Component{
handleClick(){
  console.log("I"m clicked by users!")
}

render(){
  const title="react is awesome!"
  const isShow=true
  const todolist=["eat","rest","go to company","sleep"]
  return (

  
{title}
  {isShow?
i like react 
:""}
  
todo below
  

    {todolist.map((item,index)=>
{item}
)}
  

  )
}
}


//src/js/index.jsx
import React from "react"
import {render} from "react-dom"
import Mycomponent from "../components/Mycomponent"
render(,
document.getElementById("example"))
組件的生命周期以及相關鉤子
待更新。。。
根據數據實時更新視圖
1.props
props是一個組件向其引用的子組件寫入的屬性數據對象
示例：PCIndex組件引入Header 設置 showText屬性，Header組件內部根據屬性值this.props.showText設置文本內容
//js/components/PCIndex
import React from "react"
import Mycomponent from "../Mycomponent"
import Header from "../Header"
export default class Index extends React.Component{
  render(){
return(
  

    

       
  
      )
  } 
} 


//js/components/Header
import React from "react"
export default class Header extends React.Component{
  render(){
  return(
  

  {this.props.showText}
  
  )
  }
} 
2.state
組件自身的數據存儲對象state變化可以實時更新view of  component;
state的初始化在類的構造函數constructor中，this.state.propertyname可以得到state屬性的引用，this.setState({name:value})可以設置state屬性值
示例：給MyComponent組件添加一個實時時間顯示功能
  constructor(...args){
    super(...args)
    this.state={
      currentTime:""
    }
    
  }
  componentWillMount(){
    setInterval(()=> this.setState({
      currentTime:new Date().toLocaleTimeString().substring(0,8)
    }),1000)
   
  }
// jsx view component snippet in the render method
{this.state.currentTime}