componentWillReceiveProps这个钩子在第一次初始化接收到props时候不会调用，只有第二次接收到才能调用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父组件render</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class A extends React.Component {
state = {
carName: 'Porsche' }
changeCar = () => {
this.setState({
carName: 'Audi'})
}
render() {
return(
<div>
<div>I am Component A</div>
<button onClick={
this.changeCar}>Change</button>
<B carName={
this.state.carName} />
</div>
)
}
}
class B extends React.Component {
componentWillReceiveProps() {
console.log('B - componentWillReceiveProps')
}
render() {
return(
<div>
<div>I am Component B</div>
<div>Receiving data: {
this.props.carName}</div>
</div>
)
}
}
ReactDOM.render(<A />, document.getElementById('test'))
</script>
</body>
</html>
页面刚加载以后不会调用componentWillReceiveProps这个钩子函数，点击按钮修改了A组件传给B组件的props时候，才会调用：
并且componentWillReceiveProps这个钩子函数是可以接收到参数的：
我们加入剩下的生命周期钩子，来看一下完整的流程：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父组件render</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx转化为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class A extends React.Component {
state = {
carName: 'Porsche' }
changeCar = () => {
this.setState({
carName: 'Audi'})
}
render() {
return(
<div>
<div>I am Component A</div>
<button onClick={
this.changeCar}>Change</button>
<B carName={
this.state.carName} />
</div>
)
}
}
class B extends React.Component {
componentWillReceiveProps(props) {
console.log('B - componentWillReceiveProps', props)
}
shouldComponentUpdate() {
console.log('B - shouldComponentUpdate')
return true
}
componentWillUpdate() {
console.log('B - componentWillUpdate')
}
componentDidUpdate() {
console.log('B - componentDidUpdate')
}
render() {
console.log('B - render')
return(
<div>
<div>I am Component B</div>
<div>Receiving data: {
this.props.carName}</div>
</div>
)
}
}
ReactDOM.render(<A />, document.getElementById('test'))
</script>
</body>
</html>
初次加载：
点击change按钮：
