react入门到进阶（二）

一、react属性与事件

1、State属性

State，翻译过来是状态的意思，所以它就代表着组件的状态。React把用户界面（UI）当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致。而State则代表着组件的一种状态，是可以改变的，一般State的改变都会引起UI的重新渲染，也就是用户界面会随着state变化而变化。

当然，因为前面说过有virtual DOM的存在，所以State对当前组件做了更新之后，会立马反应到virtual DOM，这之后才会更新的dom，所以变化的只是很小的一部分，能提高性能（前面有提到过如何提高）。

1、初始化State

我们先看以下例子

import React from 'react';
import ReactDom  from 'react-dom';

export default class ComponentHeader extends React.Component{
	  constructor(){
	    super();//调用基类所有初始化方法
	    this.state = {
	      usename:"chenjunchen"
	    }
	  }
	  render(){
	    return(
	      <header>
	        <p>{this.state.usename}</p>
	      </header>
	    )
	  }
	}

从上我们可以看出初始化State，我们一般用构造函数constructor()来进行，用 super()函数调用基类方法，值得注意的是，一个类的State是自己独有的，他不会污染其他的，所以对当前类的State进行定义时，只需加上this就可以了。

2、更改State

当你需要对state做更变的时候，你可以用this.setState,看一下例子

import React from 'react';
import ReactDom  from 'react-dom';

export default class ComponentHeader extends React.Component{
	  constructor(){
	    super();//调用基类所有初始化方法
	    this.state = {
	      usename:"chenjunchen"
	    }
	  }
	  render(){
	  setTimeout(()=>{
	  this.setState({usename:"chen"})},2000);
	  //更改State
	    return(
	      <header>
	        <p>{this.state.usename}</p>
	      </header>
	    )
	  }
	}

这个时候，我们设置了一个定时器等2秒后对state进行变化，而这个时候页面不会整个渲染，而只更改我们要更改的部分，这就符合我们上面说到的。

记住以下几点

• State的作用域只在当前类，不污染其他模块
• 初始化State可以用构造函数constructor( )
• State对于模块（组件）来说，属于自身属性与Props相对
• State是可变的，而Props则不可以

2、Props属性

如果一个父组件想给另一个子组件传递东西的时候，组件的Props属性就登场了，它与State属性相对应，都是组件重要的属性。

import React from 'react';
import ReactDom  from 'react-dom';

class ComponentHeader extends React.Component{
  render(){
    return(
      <header>
        <h1>yondu is a good father</h1>
      </header>
    )
  }
}

class Index extends	React.Component {
render(){
	return(
		<ComponentHeader/>
	);
  }
}

我们可以从上面看出，组件<Index/> 调用了组件<ComponentHeader/>，我们如果让父组件给子组件传递一个属性的话，直接在父组件中给子组件的标签里添加属性<ComponentHeader userid={123} name="yondu"/>，而在子组件里，则直接拿来用就可以了

class ComponentHeader extends React.Component{
  render(){
    return(
      <header>
        <h1>yondu is a good father</h1>
        <p>{this.props.userid} {this.props.name}</p>
      </header>
    )
  }
}

记住以下几点

• Props对于组件来说是自身属性
• Props不能更改

3、事件与数据的双向绑定

上面我们讲了父组件向子组件传递参数，下面来说说子组件向父组件传递参数，由于Props是不可变的，所以我们可以改变父组件的State值

我们首先来看一下把父组件中的一个构造函数拿来去接受子组件的参数

import React from 'react';
import ReactDom  from 'react-dom';
import BodyChild from './child';
export default class ComponentHeader extends React.Component{
	constructor(){
	    super();
	    this.state = {
      usename:"chenjunchen"
    }
  }//初始化state
  childchange1(event){
this.setState({usename : event.target.value});
  }//接受子组件的参数
  render(){
		return(
			<BodyChild childchange={this.childchange1.bind(this)} />
		)
	}
}

右上可以看出，父组件里childchange1函数来接受子组件传来的参数，并在给子组件了一个属性childchange（从标签里可以看出），再来看看子组件

import React from "react";
import ReactDom from "react-dom";

export default class BodyChild extends React.Component {
  render(){
    return(
      <div>
        <p>子页面输入<input type="text" onChange={this.props.childchange} /></p>
        //当子组件输入框发生变化时，给在父组件的属性childchange传递了一个参数
      </div>
    )
  }
}

可以看出子组件通过props.childchange给父组件传递了一个参数，并由父组件的构造函数childchange1接受，然后构造函数再改变父组件State值，从而达到子组件向父组件传递参数的目的

上面用事件绑定时，我们用的是构造函数来，其实，在React里如果要给一个元素绑定事件，还可以直接调用<input type="button" value="click" onClick={this.changeState.bind(this)} />，我们就直接给元素绑定了一个click事件

4、可复用组件

上面我们说了在React中，我们通过props来实现父组件向子组件传递参数的过程，而有时候如果我们想要规范一下传递的参数时，我们就需要用到propTypes,如下

ComponentHeader.propTypes = {
  userid: PropTypes.number
};//在子组件类定义完了之后，在加上这么一段

而propTypes后面可跟的参数有很多，比如bool、func、string等，当然如果你必须需要参数的话，你还可以在后面加一个PropTypes.number.isRequired。

有时候，父组件并没有把参数给子组件，但我们又需要子组件显示那个属性的时候，我们就要用到defaultProps，来设置一个默认值，看下

const defaultProps ={
  name: "默认值",
}
ComponentHeader.defaultProps=defaultProps;

我们先设置了一个常量，然后把这个常量赋值给了defaultProps，从而达到目的。

如果一个父组件想要给它的孙组件（子组件的子组件）传递参数呢，那么就要用到rest参数了，我们只需要在子组件里的引用孙组件时加入{...this.props},这样，父组件的所有属性就都可以传递给孙组件了。

5、组件的Refs

在React中，如果你想要获取原生的html节点的时候，你就可以用到refs了。

当然你也可以用以前在javascript中使用的方法，不过太麻烦了，你可以直接给节点加上ID，然后通过document.getElementById的方式获取到节点后，使用ReactDOM.findDOMNode().style....的方式来做一些事，而至于refs的话，先看下例子

<input ref="submitbutton" type="button" value="click" onClick={this.changeState.bind(this)} />

我们直接在节点里面加了refs属性，然后直接在一个函数里面使用它就可以了。

changeState(){
this.setState({usename:"chen"});
this.refs.submitbutton.style.color="red";
  }

refs需要注意的是：

• refs是访问到组件内部DOM节点唯一可靠方法
• refs会自动销毁对子组件的引用
• 不要在render或render之前对refs进行调用
• 不要滥用refs

6、独立组件间的共享Mixins

如果有时候，很多个组件都在用同一段代码或者使用同一个功能，那么Mixins就登场了。Mixins一般用来存放整个项目共用事件的一些函数的共用属性，我们首先创建一个Mixins.js的文件，然后在里面写一个函数的属性吧

const Minxins = {
  log(){
    console.log("hello world");
  }
};
export default Minxins//让外部能引用

接着，我们在要使用这个属性的文件引入插件以及我们的Mixins.js文件

import ReactMixin from 'react-mixin';
import Minxins from './mixins';

然后就是用prototype赋值，这样我们在上面定义Minxins属性就可以使用了

 changeState(){
    Minxins.log();
}//随便找个函数使用这个共有属性
ReactMixin(ComponentHeader.prototype,Minxins);//赋值

值得注意的是，这个Mixins也有其自己的生命周期。