1.base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件化编程</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</head>
<body>
<div id="app1"></div>
<div id="app2"></div>
<script type="text/babel">
//工厂函数组件
function MyCompo1() {
return <h2>自定义函数组件</h2>
}
//ES6类组件
class MyCompo2 extends React.Component{
render(){
console.log(this);
return <h1>自定义类组件</h1>;
}
}
ReactDOM.render(<MyCompo1 />,document.getElementById('app1'));
ReactDOM.render(<MyCompo2 />,document.getElementById('app2'));
</script>
</body>
</html>
2.props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props</title>
<script src="../common/react/development.js"></script>
<script src="../common/react-dom/development.js"></script>
<script src="../common/babel.js"></script>
<script src="../common/prop-types.js"></script>
</head>
<body>
<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div>
<div id="app4"></div>
<div id="app5"></div>
<div id="app6"></div>
<script type="text/babel">
//1.定义组件
function Person(props){
return (
<ul>
<li>姓名:{props.name}</li>
<li>年龄:{props.age}</li>
<li>性别:{props.sex}</li>
</ul>
)
}
//2.指定属性默认值
Person.defaultProps = {
name:'mary',
age:18,
sex:'女'
};
//3.指定属性类型和必要限制
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number.isRequired,
sex:PropTypes.string
};
//ES6类组件
const Student = class extends React.Component{
constructor(props){
super(props);
}
render(){
console.log("student---this:",this);
return(
<div>
<h1>{this.props.title}</h1>
<ul>
<li>姓名:{this.props.name}</li>
<li>年龄:{this.props.age}</li>
<li>性别:{this.props.sex}</li>
<li>工作:{this.props.work}</li>
</ul>
</div>
)
}
};
const XiaoXueSheng = class extends Student{
constructor(props){
super(props);
}
render(){
console.log("xiaoxuesheng---this:",this);
return(
<div>
<h1>{this.props.title}</h1>
<ul>
<li>姓名:{this.props.name}</li>
<li>年龄:{this.props.age}</li>
<li>性别:{this.props.sex}</li>
<li>工作:{this.props.work}</li>
<li>爱好:{this.props.hobby}</li>
</ul>
</div>
)
}
};
const ZhongXueSheng = class extends Student{
constructor(props){
super(props);
}
render(){
console.log("zhongxuesheng---this:",this);
return(
<div>
<h1>{this.props.title}</h1>
<ul>
<li>姓名:{this.props.name}</li>
<li>年龄:{this.props.age}</li>
<li>性别:{this.props.sex}</li>
<li>工作:{this.props.work}</li>
<li>爱好:{this.props.hobby}</li>
</ul>
</div>
)
}
};
const DaXueSheng = class extends Student{
constructor(props){
super(props);
}
render(){
console.log("daxuesheng---this:",this);
return(
<div>
<h1>{this.props.title}</h1>
<ul>
<li>姓名:{this.props.name}</li>
<li>年龄:{this.props.age}</li>
<li>性别:{this.props.sex}</li>
<li>工作:{this.props.work}</li>
<li>爱好:{this.props.hobby}</li>
</ul>
</div>
)
}
};
const p1 = {
name:'Jack',
age:23,
sex:'男',
work:'学习'
};
const xiaoxuesheng = {
title:'小学生',
name:'Jack',
age:23,
sex:'男',
work:'学习',
hobby:'扔沙包'
};
const zhongxuesheng = {
title:'中学生',
name:'Jack',
age:23,
sex:'男',
work:'学习',
hobby:'打游戏'
};
const daxuesheng = {
title:'大学生',
name:'Jack',
age:23,
sex:'男',
work:'学习',
hobby:'谈恋爱'
};
const p = p1;
ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>, document.getElementById('app1'));
ReactDOM.render(<Person {...p}/>, document.getElementById('app2'));
ReactDOM.render(<Student {...p}/>, document.getElementById('app3'));
ReactDOM.render(<XiaoXueSheng {...xiaoxuesheng}/>, document.getElementById('app4'));
ReactDOM.render(<ZhongXueSheng {...zhongxuesheng}/>, document.getElementById('app5'));
ReactDOM.render(<DaXueSheng {...daxuesheng}/>, document.getElementById('app6'));
</script>
</body>
</html>
3.state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>State</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</head>
<body>
<div id="app1"></div>
<script type="text/babel">
//ES6类组件
class Like extends React.Component{
constructor(props){
//调用父类的构造函数
super(props);
//初始化状态
this.state = {
isLikeMe:true
}
//将新增方法的this强制绑定this方法
this.handleClick = this.handleClick.bind(this);
}
//新增的方法this默认不是组件对象
handleClick(){
console.log("handleClick--->this:",this);
//获取原有状态
const {isLikeMe} = this.state;
//将状态取反
const newLikeMe = !isLikeMe;
//更新状态
this.setState({
isLikeMe:newLikeMe,
})
};
//重写组件类的方法
render(){
console.log("render--->this:",this);
//读取状态|解构赋值
const {isLikeMe} = this.state;
return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>;
}
}
ReactDOM.render(<Like />,document.getElementById('app1'));
</script>
</body>
</html>
4.refs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>props</title>
<script src="../common/react/development.js"></script>
<script src="../common/react-dom/development.js"></script>
<script src="../common/babel.js"></script>
<script src="../common/prop-types.js"></script>
</head>
<body>
<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div>
<div id="app4"></div>
<div id="app5"></div>
<div id="app6"></div>
<script type="text/babel">
/*
需求:
1.点击按钮提示第一个输入框的值
2.当第二个输入框失去焦点时候,提示这个框中的输入值
*/
//ES6类组件
const Example = class extends React.Component{
constructor(props){
super(props);
//绑定函数this
this.showContent1 = this.showContent1.bind(this);
this.showContent2 = this.showContent2.bind(this);
this.handleBlue = this.handleBlue.bind(this);
}
//利用老版本的ref字符串写法
showContent1(){
console.log("showContent1---this:",this);
const input = this.refs.input1;
alert(input.value);
}
//利用react推荐的ref写法
showContent2(){
console.log("showContent2---this:",this);
alert(this.input2.value);
console.log("showContent2:",this.input2)
}
//利用事件形参
handleBlue(event){
// alert(this.input3.value);
const input = event.target;
alert(input.value);
}
render(){
console.log("example---this:",this);
return(
<div>
<input ref="input1" type="text"/>
<button onClick={this.showContent1}>显示内容</button>
<br/>
<input ref={(inst)=>this.input2 = inst} type="text"/>
<button onClick={this.showContent2}>显示内容</button>
<br/>
<input onBlur={this.handleBlue} ref={inst=>this.input3=inst} type="text" placeholder="失去焦点提示内容"/>
</div>
)
}
};
ReactDOM.render(<Example/>, document.getElementById('app1'));
</script>
</body>
</html>
5.