react--state/props/事件与数据绑定/可复用组件/Refs/Mixins

一.state
BodyIndex.js

import React from 'react';
export default class BodyIndex extends React.Component {
  constructor(){
      super(); //调用基类的所有的初始化方法
      this.state =  {
        username : "Parry",
        age : 20
      }; //初始化赋值
  }

	render() {
    setTimeout(()=>{
      //更改 state 的时候
      this.setState({username: "IMOOC",age : 30});
    },4000);

		return (
			<div>
				<h2>页面的主体内容</h2>
				<p>{this.state.username} {this.state.age} {this.props.userid} {this.props.username}</p>
			</div>
		)
	}
}

小结：
初始化：this.state = {username:’’}
修改：this.setState({username;’’})
state的作用只作用域当前的类，不污染其他模块

二.props
BodyIndex.js

import React from 'react';
class BodyIndex extends React.Component{
	constructor(arg) {
	    super();//调用所有基类的初始方法
		
	}
	render(){
		setTimeout(()=>{
			this.setState({
				username:"kgc"
			})
		},4000)
		return (
		<div>
		   <p>{this.props.userid}</p>
		</div>
		)
	}
}
export default BodyIndex;

app.js

import React from 'react';
class BodyIndex extends React.Component{
	constructor(arg) {
	    super();//调用所有基类的初始方法
		
	}
	render(){
		setTimeout(()=>{
			this.setState({
				username:"kgc"
			})
		},4000)
		return (
		<div>
		   <p>{this.props.userid}</p>
		</div>
		)
	}
}
export default BodyIndex;

小结：
props对于外来模块 属于外来属性
传递参数：
接收参数：this.props.username
三.事件与数据绑定–子组件向父组件传值
1.事件的使用 bodyIndex.js

import React from 'react';
class BodyIndex extends React.Component{
	constructor(arg) {
	    super();//调用所有基类的初始方法
		this.state = {
			username:"zhangsan",
			age:20
		}
	}
	changeUserInfo(){
		this.setState({
			username:"kgc"
		})
	}
	render(){
		return (
		<div>
		   <p>{this.state.username}</p>
		   <p><input type="button" value="提交" onClick={this.changeUserInfo.bind(this)} /></p>
		</div>
		)
	}
}
export default BodyIndex;

2.子组件向父组件传值
bodychild.js

import React from 'react';

export default class BodyChild extends React.Component{

  render(){
    return(
      <div>
        <p>子页面输入：<input type="text" onChange={this.props.handleChildValueChange}/></p>
      </div>
    )
  }

}

bodyIndex.js

import React from 'react';
import BodyChild from './bodychild';
class BodyIndex extends React.Component{
	constructor(arg) {
	    super();//调用所有基类的初始方法
		this.state = {
			username:"zhangsan",
			age:20
		}
	};
	changeUserInfo(){
		this.setState({
			username:"kgc"
		})
	};
	handleChildValueChange(event) {
		this.setState({username: event.target.value});
	};
	
	render(){
		return (
		<div>
		   <p>{this.state.username}</p>
		   <p><input type="button" value="提交" onClick={this.changeUserInfo.bind(this)} /></p>
			<BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>
		</div>
		)
	}
}
export default BodyIndex;

四.可复用组件
bodyIndex.js

import React from 'react';
import BodyChild from './bodychild';
import PropTypes from "prop-types";
const defaultProps = {
	username: '这是一个默认的用户名'
};
export default class BodyIndex extends React.Component{
	constructor(arg) {
	    super();//调用所有基类的初始方法
		this.state = {
			username:"lisi",
			age:20
		}
	};
	changeUserInfo(a){
		this.setState({
			age:a
		})
	};
	handleChildValueChange(event) {
		this.setState({username: event.target.value});
	};
	
	render(){
		return (
		<div>
		   <p>username:{this.props.username}</p>
		   <p>userid:{this.props.userid}</p>
		   <p><input type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)} /></p>
			<BodyChild handleChildValueChange={this.handleChildValueChange.bind(this)}/>
		</div>
		)
	}
}

BodyIndex.propTypes = {
    userid: PropTypes.number.isRequired,   //加上isRequired以后，即使父组件没传递值也会抛出警告
}

//默认值设置
BodyIndex.defaultProps = defaultProps;

app.js中使用

import React from 'react';
import './App.css';
import ComponentHeader from  "./components/header";
import ComponentFooter from  "./components/footer";
import ComponentIndex from  "./components/BodyIndex";
//注意：主键名用大写

function App() {
	var loginState = 0;
    var componentHeader ;//注意：变量名用小写
	if(loginState==0){
	 	componentHeader = <ComponentHeader />
	}
  return (
    <div className="App">
		 {componentHeader}
		<ComponentIndex userid={123}/>
		<ComponentFooter />
	</div>
  );
}
export default App;

bodychild.js中继承父级的props，并且自己定义props
1.父级在调用子组件时

import React from 'react';
import BodyChild from './bodychild';
import PropTypes from "prop-types";
const defaultProps = {
	username: '这是一个默认的用户名'
};
export default class BodyIndex extends React.Component{
	constructor(arg) {
	    super();//调用所有基类的初始方法
		this.state = {
			username:"lisi",
			age:20
		}
	};
	changeUserInfo(a){
		this.setState({
			age:a
		})
	};
	handleChildValueChange(event) {
		this.setState({username: event.target.value});
	};
	
	render(){
		return (
		<div>
		   <p>username:{this.props.username}</p>
		   <p>userid:{this.props.userid}</p>
		   <p><input type="button" value="提交" onClick={this.changeUserInfo.bind(this,99)} /></p>
		<BodyChild {...this.props} id={1} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
		</div>
		)
	}
}
//数据类型设置
BodyIndex.propTypes = {
    userid: PropTypes.number.isRequired,   //加上isRequired以后，即使父组件没传递值也会抛出警告
}

//默认值设置
BodyIndex.defaultProps = defaultProps;

2.子页面输出 bodychild.js

<p>{this.props.userid} {this.props.username} {this.props.id}</p>

五.Refs

六.Mixins
1.安装：npm install --save mixin@2
2.mixin.js

const MixinLog = {
  componentDidMount(){
    console.log("MixinLog componentDidMount");
  },
  log(){
    console.log("abcdefg...");
  }
};

export default MixinLog

3.使用：
bodyindex.js

import React from 'react';
import BodyChild from './bodychild';
import PropTypes from "prop-types";

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

const defaultProps = {
	username: '这是一个默认的用户名'
};
export default class BodyIndex extends React.Component{
	constructor(arg) {
	    super();//调用所有基类的初始方法
		this.state = {
			username:"lisi",
			age:20
		}
	};
	changeUserInfo(a){
		this.setState({
			age:a
		})
		
		//第一种方式
		// var mySubmitBotton  = document.getElementById('submitButton');
		// console.log(mySubmitBotton);
		// ReactDOM.findDOMNode(mySubmitBotton).style.color = 'red';

		//第二种方式
		console.log(this.refs.submitButton);
		this.refs.submitButton.style.color = 'red';
	};
	handleChildValueChange(event) {
		this.setState({username: event.target.value});
	};
	
	render(){
		return (
		<div>
		   <p>username:{this.props.username}</p>
		   <p>userid:{this.props.userid}</p>
		   <p><input type="button" ref="submitButton" value="提交" onClick={this.changeUserInfo.bind(this,99)} /></p>
		<BodyChild {...this.props} id={1} handleChildValueChange={this.handleChildValueChange.bind(this)}/>
		</div>
		)
	}
}
//数据类型设置
BodyIndex.propTypes = {
    userid: PropTypes.number.isRequired,   //加上isRequired以后，即使父组件没传递值也会抛出警告
}

//默认值设置
BodyIndex.defaultProps = defaultProps;

ReactMixin(BodyIndex.prototype, MixinLog);