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

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

這篇文章我將持續(xù)更新來總結(jié)react使用的各個技術(shù)棧與基礎(chǔ)知識。

react環(huán)境搭建步驟詳解

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

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

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

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

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

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

const str=
react is very awesome!
i like react
這樣就會報錯！
jsx elements必須在一個可以閉合的標(biāo)簽元素中
說白了react模板必須有一個父元素，并且僅有一個作為根節(jié)點。
改為如下方法，
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 
:""}
這樣可以實現(xiàn)類似angular *ng-if指令中的選擇性顯示隱藏元素。
插入函數(shù)表達式
例如利用array.map 根據(jù)數(shù)據(jù)實現(xiàn)循環(huán)展示某個tag

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

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

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

{title}
font-size->fontSize //convert to  camelize
自定義react組件
繼承React.Component然后組件里面的render方法必須實現(xiàn)，返回值是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}
)}
  

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


根據(jù)es6 import export default分離組件到其他文件
如果一個模塊中組件過多，代碼量大不利于維護，也不利于分工協(xié)同。這樣我們就需要把組件代碼抽離出來形成多帶帶的文件
//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"))
組件的生命周期以及相關(guān)鉤子
待更新。。。
根據(jù)數(shù)據(jù)實時更新視圖
1.props
props是一個組件向其引用的子組件寫入的屬性數(shù)據(jù)對象
示例：PCIndex組件引入Header 設(shè)置 showText屬性，Header組件內(nèi)部根據(jù)屬性值this.props.showText設(shè)置文本內(nèi)容
//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
組件自身的數(shù)據(jù)存儲對象state變化可以實時更新view of  component;
state的初始化在類的構(gòu)造函數(shù)constructor中，this.state.propertyname可以得到state屬性的引用，this.setState({name:value})可以設(shè)置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}