title: 04-React组件（二）：常见属性和函数
publish: true
defaultProps 和 prop-types
使用 defaultProps 设置组件的默认值
React 中，使用静态的 defaultProps 属性，来设置组件的默认属性值。
格式举例：
static defaultProps = {
initcount: 0
};
|
使用prop-types进行props数据类型的校验
在组件中，可以通过 prop-types 把外界传递过来的属性，做类型校验。如果类型不匹配，控制台会弹出告警。
注意：如果要为 传递过来的属性做类型校验，必须安装 React 提供的 第三方包，叫做 prop-types。
格式举例：
static propTypes = {
initcount: ReactTypes.number
};
|
下方代码中，在引用组件的时候，如果类型不匹配：
ReactDOM.render(
<div>
{/* 规定，每个用户在使用 组件的时候，必须传递一个 默认的 数值，作为 组件初始化的 数据 */}
<Counter initcount="我是string类型"></Counter>
</div>,
document.getElementById("app")
);
|
控制台告警如下：
20190212_2130.png
代码举例
我们把 defaultProps 和 prop-types 来举个例子。
（1）index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
（2）main.js:
import React from "react";
import ReactDOM from "react-dom";
import Counter from "./components/Counter.jsx";
ReactDOM.render(
<div>
{/* 规定，每个用户在使用 组件的时候，必须传递一个 默认的 数值，作为 组件初始化的 数据 */}
<Counter initcount={0}></Counter>
</div>,
document.getElementById("app")
);
|
（3）/components/Counter.jsx：
import React from "react";
import ReactTypes from "prop-types";
export default class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "ok",
count: props.initcount
};
}
static defaultProps = {
initcount: 0
};
render() {
return (
<div>
<div>
<h3>这是 Counter 计数器组件 </h3>
<p>当前的计数是：{this.state.count}</p>
</div>
</div>
);
}
}
|
运行效果：
20190212_2100.png
事件绑定
案例：点击按钮后，计数器 +1。
原生js做事件绑定
代码举例：
（1）index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
（2）main.js:
import React from "react";
import ReactDOM from "react-dom";
import Counter from "./components/Counter.jsx";
ReactDOM.render(
<div>
{/* 规定，每个用户在使用 组件的时候，必须传递一个 默认的 数值，作为 组件初始化的 数据 */}
<Counter initcount={0}></Counter>
</div>,
document.getElementById("app")
);
|
（3）/components/Counter.jsx：
import React from "react";
import ReactTypes from "prop-types";
export default class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "ok",
count: props.initcount
};
}
static defaultProps = {
initcount: 0
};
static propTypes = {
initcount: ReactTypes.number
};
render() {
return (
<div>
<div>
<h3>这是 Counter 计数器组件 </h3>
<input type="button" value="+1" id="btn" />
<p>当前的计数是：{this.state.count}</p>
</div>
</div>
);
}
componentDidMount() {
document.getElementById("btn").onclick = () => {
this.setState({
count: this.state.count + 1
});
};
}
}
|
使用 React 提供的方法，做事件绑定
代码举例：
（1）index.html和 （2）main.js 的代码不变，和上一小段中的代码一致。
（3）/components/Counter.jsx：
import React from "react";
import ReactTypes from "prop-types";
export default class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "ok",
count: props.initcount
};
}
static defaultProps = {
initcount: 0
};
static propTypes = {
initcount: ReactTypes.number
};
render() {
return (
<div>
<div>
<h3>这是 Counter 计数器组件 </h3>
{}
<input type="button" value="+1" id="btn" onClick={this.myMethod} />
<p>当前的计数是：{this.state.count}</p>
</div>
</div>
);
}
myMethod = () => {
this.setState({
count: this.state.count + 1
});
};
}
|
生命周期函数：shouldComponentUpdate()
在 shouldComponentUpdate() 函数中，必须要求返回一个布尔值。
需要注意的是：如果返回的值是 false，则不会继续执行后续的生命周期函数，而是直接退回到了 运行中 的状态。因为此时，后续的 render 函数并没有被调用，因此页面不会被更新，但是组件的 state 状态，却被修改了。这种情况，我们也可以这样理解：如果返回值为 false，此时只是更新了 state 里面的数值，但是并没有渲染到 DOM节点上。
利用上面这个特性，我们可以来举个例子。
举例：实现 Counter 计数器只在偶数情况下更新。
实现思路：在 shouldComponentUpdate() 函数中，如果 state 中 的count 的值为奇数，就 return false；否则就 return true。
代码实现：（我们在上面的Counter.jsx代码基础之上，做添加）
shouldComponentUpdate(nextProps, nextState) {
console.log(this.state.count + " ---- " + nextState.count);
return nextState.count % 2 === 0 ? true : false;
}
|
上面这部分的代码，和 render() 方法是并列的。我们需要注意里面的注释，关注 nextState 参数的用法。
在js代码中获取html标签的属性
比如说，如果想获取 html标签的 innerHTML 属性，做法如下：
通过原生 js 获取：
document.getElementById('myh3').innerHTML
|
也可以通过 React 提供的 refs 获取：
代码举例：
（3）/components/Counter.jsx：
import React from "react";
import ReactTypes from "prop-types";
export default class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "ok",
count: props.initcount
};
}
static defaultProps = {
initcount: 0
};
static propTypes = {
initcount: ReactTypes.number
};
render() {
return (
<div>
<div>
<h3>这是 Counter 计数器组件 </h3>
{}
<input type="button" value="+1" id="btn" onClick={this.myMethod} />
<h3 id="myh3" ref="mymyh3">
当前的计数是：{this.state.count}
</h3>
</div>
</div>
);
}
myMethod = () => {
this.setState({
count: this.state.count + 1
});
};
shouldComponentUpdate(nextProps, nextState) {
console.log(this.state.count + " ---- " + nextState.count);
return true;
}
componentWillUpdate() {
console.log(this.refs.mymyh3.innerHTML);
}
componentDidUpdate() {
console.log(this.refs.mymyh3.innerHTML);
}
}
|
上方代码中，componentWillUpdate() 和 componentDidUpdate() 方法里的代码，就是我们这一段要举的例子。
需要注意的是，<h3 id="myh3" ref="mymyh3">这部分代码中，属性名只能小写，不能大写。
工程文件：
生命周期函数：componentWillReceiveProps()
当子组件第一次被渲染到页面上的时候，不会触发这个 函数。
只有当父组件中，通过 某些 事件，重新修改了 传递给 子组件的 props 数据之后，才会触发 componentWillReceiveProps。
代码举例：
（1）index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
（2）main.js:（引入组件）
import React from "react";
import ReactDOM from "react-dom";
import MyParent from "./components/TestReceiveProps.jsx";
ReactDOM.render(
<div>
<MyParent></MyParent>
</div>,
document.getElementById("app")
);
|
（3）TestReceiveProps.jsx：（组件的定义）
import React from "react";
export default class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "这是父组件中的 msg 消息"
};
}
render() {
return (
<div>
<h1>这是父组件</h1>
<input
type="button"
value="点击修改父组件的 MSG"
onClick={this.changeMsg}
/>
<hr />
{/* 在父组件 Parent 中引用子组件 Son */}
<Son pmsg={this.state.msg} />
</div>
);
}
changeMsg = () => {
this.setState({
msg: "修改组件的msg为新的值"
});
};
}
class Son extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<h3>这是子组件 --- {this.props.pmsg}</h3>
</div>
);
}
componentWillReceiveProps(nextProps) {
console.log(this.props.pmsg + " ---- " + nextProps.pmsg);
}
}
|
上方代码中，我们在组件 Parent 中引入了子组件 Son。重点注意 componentWillReceiveProps()函数 的注释部分。
