react入门三部曲

参考文章

React 入门实例教程-阮一峰
React入门-慕课网
React文档-中文

github

github


初识

1
2
3
4
5
6
7
var APP=React.createClass({
render:function(){
return <div className='alert-text'>Hello {this.props.name}</div>
}
})
ReactDOM.render(<APP name="World" />,document.body)

这段代码中首先我们可以看到React定义组件的方式是用一个函数来创建的.其中传递的是个对象字面量.
在对象字面量中,最重要的一个属性就是render 它返回了需要渲染的组件.并且是需要用一个函数来包裹返回的.

JSX

因为是JSX语法,那么可以在JSX中使用HTML语法了.这里有一篇JSX语法教程

自定义出的组件标签名,React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。render渲染时,会把大写的组件名定义为自定义组件,把小写的组件名定义为HTML自带的标签名进行渲染。

获值

我们在reder中写了一个{this.props.name},那么我们在渲染的时候却写上了一个name=”World”,然后输出的是 hello world那么很明显 this.props指向的就是这个虚拟的DOM组件 this.props.name意思也很明显了

样式与style

上述我们用了一个className而不用class,原因就是,在ES6中class为一个保留字,所以我们得用className来设置样式.当然还有一个设置样式的方法,那就是style

1
2
3
4
5
6
7
var APP=React.createClass({
render:function(){
return <div style={{color:'red',backgroundColor:'black'}}>Hello {this.props.name}</div>
}
})
ReactDOM.render(<APP name="World" />,document.body)

首先 在JSX中 加引号则认为是字符串 加{}则认为是变量,并且在写样式的时候有-号得用驼峰式写法. 而声明style的时候是需要传递一个对象的 上面的写法等同于下面的写法

1
2
3
4
5
6
7
8
9
var APP=React.createClass({
render:function(){
var styleObj={
color:'red',
backgroundColor:'black'
}
return <div style={styleObj}>Hello {this.props.name}</div>
}
})

reactComponents的三种阶段

  1. Mounting:已插入真实的DOM
    这里是reactDOM.render渲染完毕后的一种状态

  2. Updating:正在被重新渲染
    这是当更改了reactComponents组件的某些内容然后被重新render(渲染)

  3. Unmounting:已移出真实 DOM
    一个reactComponents组件从DOM结构中移除的这样一个过程

每一个状态react都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps, object nextState)
  • componentDidUpdate(object prevProps, object prevState)
  • componentWillUnmount()

this.state

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var Hello=React.createClass({
getInitialState:function(){
alert("init")
return{
opacity:0.1,
fontSize:"12px"
}
},
render:function(){
/*
* 或者style={this.state}
* */
return <div style={{opacity:this.state.opacity,fontSize:this.state.fontSize}} >Hello {this.props.name}</div>
},
componentWillMount:function(){
alert("will")
},
componentDidMount:function(){
alert("did")
}
})
ReactDOM.render(<Hello name="world"/>,document.body);

方法API

其中可以看到有一个方法是getInitialState,这个方法会组件挂载之前调用一次初始化state的值

this.props与this.state

既然this.props和this.state是一样的效果.那么什么属性应该放props什么属性应该放state?
引用阮一峰BLOG一段话

由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

如何修改this.state?

那么我们在组件已经插入到真实的DOM中去的时候更改一下this.state的值

1
2
3
4
5
6
7
8
9
10
componentDidMount:function(){
alert("did");
var _self=this;
window.setTimeout(function(){
_self.setState({
opacity:0.5,
fontSize:"44px"
})
})
}

注意 这里使用了setState方法而不是直接对this.state进行修改.官方(中文)的文档则给出了一则警告

1
绝对不要直接改变 this.state,因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的。

其实意思就是如果你直接修改了this.state那么下一次setState不会根据你上次的this.state进行修改

这里的window.setTimeout中this指向的是window,但是在componentDidMount这些方法中this指向的是hello这个实例
在上述的setTimeout你也可以这样写

1
2
3
4
5
6
window.setTimeout(function(){
this.setState({
opacity:0.5,
fontSize:"44px"
})
}.bind(this))

当修改了state那么组件就会进入Updating这个阶段


react中的事件绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var TestClickComponent=React.createClass({
render:function(){
return (
<div>
<button onClick={this.handleClick}>显示|隐藏 </button><span ref="tip">测试点击</span>
</div>
)
},
handleClick:function(event){
event.stopPropagation();
event.preventDefault();
/*this.refs.tip;//非真实的DOM节点*/
var tipE=this.refs.tip.getDOMNode();//拿到真实节点
console.log(15,tipE)
if(tipE.style.display==="none"){
tipE.style.display="inline";
}else{
tipE.style.display="none";
}
},
});

在React绑定事件的方式跟在浏览器绑定差不多唯一的区别就是大小写要分明,react是驼峰式的.

ref

首先要解释这个ref属性.总所周知这些仅仅是虚拟的dom,我们拿到的也是虚拟的dom那么如何获取一个真实的dom呢,就是通过ref这个属性打一个标记,然后这个标记会返回一个虚拟的DOM节点,但这个节点有个getDOMNode()方法 这样就能拿到真实的DOM节点.拿到真实的DOM节点后能做的事情就很多了.

再来写一个表单数据绑定的

再来一个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var TestInputComponent=React.createClass({
getInitialState:function(){
return{
inputContent:""
}
},
changeHandler:function(event){
event.stopPropagation();
event.preventDefault();
this.setState({
inputContent:event.target.value
})
},
render:function(){
return (
<div>
<input type="text" onChange={this.changeHandler}/> <span>{this.state.inputContent}</span>
</div>
)
}
});

还记得前段时间说的么,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。因为当用户输入的时候旁边的span标签也会变动,所以得用this.state来保存属性.我们初始化属性后,通过this.setState来更改state状态,同时更新DOM节点