react是目前比较火一个前端框架,由fackbook开发维护。它充分利用了组件化的思想使得网页开发变得更加简洁高效，大大提高了分工协同以及代码的可维护性。
这篇文章我将持续更新来总结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性能优化。
设置元素样式
<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','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','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>
