React系列（七）：React属性、事件与共享

本文主要讲解React中关于属性的使用、React特有的标签获取以及React共享的使用等，具体如下：

• React的State属性
• React的Props属性
• React事件绑定与数据双向交互
• React组件的复用及验证
• React组件的Refs
• React独立组件之间共享操作 Mixins

1、State属性

• React的状态机，用于改变自身模块的数据；
• state作用域只属于当前类，不会污染其他模块；
• 初始化：this.state = {username: “XXX”}；
• 初始化的state设置放置在构造函数 constructor里面；
• 修改state：this.setState({username: “AAA”});
• 总结：state是对于模块 自身属性的设置。

2、Props属性

• props是对于模块来说属于外来属性（父子级数据传递）
• 传递的方式需要参数设置；
• 在接收模块中使用：this.props.xxx;

3、事件绑定与数据双向交互

3.1 事件绑定

• 第一种：在构造函数constructor中绑定this：this.focus = this.focus.bind(this);
• 或者调用绑定：onClick={this.focus.bind(this,99)}
  
  • （bind的值中this用于绑定模板，99用于参数传递）

3.2 数据的双向绑定

• 父级传递给子级(es5遵循)
• 子级页面向父级页面传递参数
  
  • 在子页面中通过调用父页面传递过来的事件 props 进行组价间的参数传递
  • 使用onChange事件可是进行实时监听

3.3 数据的请求方法

• 传统的AJAX方法
• ES6提供的promise

promise.then( null, function( reason ){
    /* rejection */
} );
// 等价于
promise.catch( function( reason ){
    /* rejection */
} );

• ES6提供的promise—使用Fetch实现HTTP的请求

fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));

4、组件的复用及验证

4.1 Props验证

• 法1：const types = {userid: React.PropTypes.number.isRequired}; BodyIndex.propTypes = types;
• 法2：BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired };
• 注：propTypes在v15.5版本之后需要安装环境才能用：npm install prop-types –save
  
  • 如下引入：import PropTypes from ‘prop-types’;
  • 使用BodyIndex.propTypes = { userid: PropTypes.number.isRequired };

4.2 默认的Props值

• 定义：const defaultNum = {username: “默认名”};
• 使用：BodyIndex.defaultProps = defaultNum;

4.3 组件的复用—参数的使用

<BodyChild {...this.props} sex={"XXX}/>

5、组件的Refs—获取标签

• 方法一：原始的获取标签方式：var myButton = document.getElementById(“submitButton”); myButton.style.color = “red”;
• 方法二：对标签设置ref属性：<input ref="submitButton" type="button" value="提交数据"/>；
• 方法二的获取以及设置：this.refs.submitButton .style.color = “red”;
• Refs是访问组件内部DOM节点的唯一可靠方法；
• 代码结束时，Refs会自动销毁掉原来对子组件的引用；
• 不要在render或者render之前对Refs进行调用；
• 不要滥用Refs。

6、独立组件之间共享操作 Mixins

• 作用：不同组件之间公用功能，共享代码；
• 项目安装mixin：npm install –save react-mixin@2
• 导入插件：import ReactMixin from ‘react-mixin’;
• 新建共享文件——存放大量的公共函数或者属性；
• 哪里需要使用就在那个组件import MixinLog from ‘./mixin.js’;
• 把共享对象集合MixinLog，赋值给当前的组件原型：ReactMixin(BodyIndex.prototype, MixinLog);
• 对应不同的需求进行函数调用即可，如：MixinLog.log()。
• 特点：和页面具有类似的生命周期，调用几次就执行了几次。

7、 总结

本文主要是对React的状态属性使用以及组件验证、复用作出简要介绍，具体代码可以下载—链接：https://pan.baidu.com/s/1i6t6Mc1 密码：9drr

下载完毕之后，通过命令面板定位到当前文件夹，之后执行npm install安装所有环境，安装完毕之后，执行webpack –watch，项目即可运行。