react

react入门三部曲

soul

2016年3月8日 • 6 min read

参考文章

github

初识

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

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的时候是需要传递一个对象的上面的写法等同于下面的写法

var APP=React.createClass({ 
   render:function(){ 
       var styleObj={ 
           color:'red', 
           backgroundColor:'black' 
       } 
       return <div style={styleObj}>Hello {this.props.name}</div> 
   } 
})

reactComponents的三种阶段

Mounting:已插入真实的DOM这里是reactDOM.render渲染完毕后的一种状态
Updating：正在被重新渲染这是当更改了reactComponents组件的某些内容然后被重新render(渲染)
Unmounting：已移出真实 DOM一个reactComponents组件从DOM结构中移除的这样一个过程

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

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

this.state

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的值

componentDidMount:function(){ 
   alert("did"); 
   var _self=this; 
   window.setTimeout(function(){ 
       _self.setState({ 
           opacity:0.5, 
           fontSize:"44px" 
       }) 
   }) 
}

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

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

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

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

window.setTimeout(function(){ 
       this.setState({ 
           opacity:0.5, 
           fontSize:"44px" 
       }) 
   }.bind(this))

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

react中的事件绑定

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节点后能做的事情就很多了.

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

再来一个

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节点