摘要：是目前比较火一个前端框架由开发维护。这篇文章我将持续更新来总结使用的各个技术栈与基础知识。这样我们就需要把组件代码抽离出来形成多带带的文件组件的生命周期以及相关钩子待更新。。。

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}