react基础（持续更新）

react是目前比较火一个前端框架,由fackbook开发维护。它充分利用了组件化的思想使得网页开发变得更加简洁高效，大大提高了分工协同以及代码的可维护性。

这篇文章我将持续更新来总结react使用的各个技术栈与基础知识。

搭建实热更新的react开发环境

react环境搭建步骤详解

jsx基础

ReactDOM中的render方法可以将某个jsx模板或者react组件挂载到html对应的dom元素上

示例:给div id="example"显示一句hello react

import React from 'react'
import {render} from 'react-dom'
render(<h1>hello,react</h1>,
document.getElementById('example'))

react 每个组件的模板根节点只能有一个元素

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(<h1>react is very awesome!</h1>,
document.getElementById('example'))

这种把模板直接嵌套在js语句中当表达式就是jsx语法.
render函数会把某个react组件或jsx模板挂载到html中id==example 的dom元素上。但是如果你想react组件模板中再写一行字
i like react
使用如下方法

const str=<h1>react is very awesome!</h1><p>i like react</p
render(str,
document.getElementById('example'))

这样就会报错！
jsx elements必须在一个可以闭合的标签元素中
说白了react模板必须有一个父元素，并且仅有一个作为根节点。
改为如下方法，

const str=(<div><h1>hello,world</h1><p>i like react </p></div>)
render(str,
document.getElementById('example'))

our react demo works again!

{}可以插入js表达式

• 插入变量，
  例如将h2中的字符提取到外部变量中

const title="react is awesome!"
  <h1>{title}</h1>

• 插入三元运算符boolean?true_to_execute:false_to_execute

  indicate whether show or not by a variable isShow which type is boolean

 const isShow=false
 {isShow?<p >i like react </p>:''}

这样可以实现类似angular *ng-if指令中的选择性显示隐藏元素。

• 插入函数表达式
  例如利用array.map 根据数据实现循环展示某个tag

render(){
 const todolist=['eat','rest','go to company','sleep']
 return (<ul>
    {todolist.map((item,index)=><li key={index}>{item}</li>)}
  </ul>)
}

值得注意的是，循环渲染某个元素必须给元素指定key属性不同的值，方便react性能优化。

设置元素样式

• 设置className 添加stylesheet 类名
  由于class是jsz中的关键字，我们的模板是写在js语句中的，所以jsx模板中的class必须改为className，通过这样方法改变元素样式

<p  className="banner">i like react </p>

• 直接设置style
  设置style必须设置为js字面量对象不能用字符串标识，所有的短线命名，必须改为驼峰命名

<h1  style={{color:"red",fontSize:'20px'}}>{title}</h1>

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 (
<div>
  <h1  style={{color:"red",fontSize:'20px'}}>{title}</h1>
  {isShow?<p  className="banner">i like react </p>:''}
  <h3>todos below</h3>
  <ul>
    {todolist.map((item,index)=><li key={index}>{item}</li>)}
  </ul>
</div>
  )
}
}

添加事件监听

事件属性也必须采用驼峰命名，先在自定义组件中定义事件回调方法
然后在事件属性上添加回调，如果用到了this一定要bind(this),不然默认指向undefined
示例：双击h2 tag,控制台显示消息 i'm clicked by users

//in your component
handleClick(){
  console.log('I\'m clicked by users!')
}
<h1 onDoubleClick={this.handleClick.bind(this)} </h1>

根据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 (
<div>
  <h1 onDoubleClick={this.handleClick.bind(this)} style={{color:"red",fontSize:'20px'}}>{title}</h1>
  {isShow?<p  className="banner">i like react </p>:''}
  <h3>todo below</h3>
  <ul>
    {todolist.map((item,index)=><li key={index}>{item}</li>)}
  </ul>
</div>
  )
}
}


//src/js/index.jsx
import React from 'react'
import {render} from 'react-dom'
import Mycomponent from '../components/Mycomponent'
render(<Mycomponent/>,
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(
  <div className="index-pc">
    <Header showText="MY React Demo"/>
    <Mycomponent/>   
  </div>
      )
  } 
} 


//js/components/Header
import React from 'react'
export default class Header extends React.Component{
  render(){
  return(
  <header className="header">
  {this.props.showText}
  </header>
  )
  }
} 

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
<span>{this.state.currentTime}</span>