<!DOCTYPE html>
<html>
<head>
? ? <meat charset="UTF-8">
? ? ? ? <title>2_react生命周期-父组件render流程</title>
</head>
<body>
? ? <!-- 准备好一个容器 -->
? ? <div id="test"></div>
? ? <!-- 核心库 -->
? ? <script type="text/javascript" src="../js/react.development.js"></script>
? ? <!-- react-dom,操作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>
? ? <!-- 此处一定要写babel -->
? ? <script type="text/babel">
? ? ? ? //1.创建组件
? ? ? ? class Count extends React.Component{
? ? ? ? ? //构造器
? ? ? ? ? constructor(props){
? ? ? ? ? ? ? console.log('Count---constructor');
? ? ? ? ? ? ? super(props)
? ? ? ? ? ? ? ?//初始化状态
? ? ? ? ? ? ? this.state = { count: 0 }
? ? ? ? ? }
? ? ? ? ? //加1按钮的回调
? ? ? ? ? add = ()=>{
? ? ? ? ? ? //获取原状态
? ? ? ? ? ? const {count} =this.state
? ? ? ? ? ? //更新状态
? ? ? ? ? ? this.setState({count: count+1})
? ? ? ? ? }
? ? ? ? ? death = ()=>{
? ? ? ? ? ? ? ReactDOM.unmountComponentAtNode(document.getElementById('test'))
? ? ? ? ? }
? ? ? ? ? //强制更新按钮的问题
? ? ? ? ? force =()=>{
? ? ? ? ? ? ? this.forceUpdate()
? ? ? ? ? }
? ? ? ? ? force
? ? ? ? ? //组件将要挂载的钩子
? ? ? ? ? componentWillMount(){
? ? ? ? ? ? ? console.log('Count---componentWillMount');
? ? ? ? ? }
? ? ? ? ? //组件挂载完毕的钩子
? ? ? ? ? componentDidMount(){
? ? ? ? ? ? ? console.log('Count---componentDidMount')
? ? ? ? ? }
? ? ? ? ? //组件将要卸载的钩子
? ? ? ? ? componentWillUnmount(){
? ? ? ? ? ? ? console.log('Count---componentWillUnmount')
? ? ? ? ? }
? ? ? ? ? //控制组件更新的‘阀门’
? ? ? ? ? shouldComponentUpdate(){
? ? ? ? ? ? ? console.log('Count---shouldComponentUpdate')
? ? ? ? ? ? ? return false;
? ? ? ? ? }
? ? ? ? ? ?//组件将要更新的钩子
? ? ? ? ? ? componentWillUpdate() {
? ? ? ? ? ? ? ? console.log('Count---componentWillUpdate')
? ? ? ? ? ? }
? ? ? ? ? ? ? //组件更新完毕的钩子
? ? ? ? ? ? componentDidUpdate() {
? ? ? ? ? ? ? ? console.log('Count---componentDidUpdate')
? ? ? ? ? ? }
? ? ? ? ? ?render(){ ?
? ? ? ? ? ? ? ? console.log('Count---render')
? ? ? ? ? ? ? ? const {count}=this.state
? ? ? ? ? ? ? ?return(
? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h2>当前求和为：{count}</h2>
? ? ? ? ? ? ? ? ? ? <button onClick={this.add}>点我+1</button> ?
? ? ? ? ? ? ? ? ? ? <button onClick={this.death}>卸载组件</button>
? ? ? ? ? ? ? ? ? ? ?<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
? ? ? ? ? ? ? ? ? </div> ? ? ? ?
? ? ? ? ? ? ? ?) ? ? ? ? ?
? ? ? ? ? ?}
? ? ? ? } ? ? ? ? ?
? ? ? ?
? ? ? ? class A extends React.Component{
? ? ? ? ? ? //初始化状态
? ? ? ? ? ? state = {carName:'奔驰'}
? ? ? ? ? ? changeCar = ()=>{
? ? ? ? ? ? ? ? this.setState({carName:'奥拓'})
? ? ? ? ? ? }
? ? ? ? ? ? render() {
? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <div>我是A组件</div>
? ? ? ? ? ? ? ? ? ? <button onClick={this.changeCar}>换车</button>
? ? ? ? ? ? ? ? ? ? <B carName={this.state.carName}/>
? ? ? ? ? ? ? ? ? </div> ?
? ? ? ? ? ? ? ) ? ?
? ? ? ? ? ? } ? ? ? ? ?
? ? ? ? }
? ? ? ? class B extends React.Component {
? ? ? ? ? ? //组件将要接收新的props的钩子
? ? ? ? ? ? componentWillReceiveProps(props){
? ? ? ? ? ? ? ? console.log('B---componentWillReceiveProps',props)
? ? ? ? ? ? }
? ? ? ? ? ? //控制组件更新的‘阀门’
? ? ? ? ? ? shouldComponentUpdate() {
? ? ? ? ? ? ? ? console.log('B---shouldComponentUpdate')
? ? ? ? ? ? ? ? return true;//true才能往下走，看最后附上的图片，否则点击控制台一直是(数字+1)shouldComponentUpdate
? ? ? ? ? ? }
? ? ? ? ? ? //组件将要更新的钩子
? ? ? ? ? ? componentWillUpdate() {
? ? ? ? ? ? ? ? console.log('B---componentWillUpdate')
? ? ? ? ? ? }
? ? ? ? ? ? //组件更新完毕的钩子
? ? ? ? ? ? componentDidUpdate() {
? ? ? ? ? ? ? ? console.log('B---componentDidUpdate')
? ? ? ? ? ? }
? ? ? ? ? ? render() {
? ? ? ? ? ? ? ? ?console.log('B---render')
? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? ?<div>我是B组件，接收到的车是：{this.props.carName}</div>
? ? ? ? ? ? ? ? )
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //2.渲染组件到页面
? ? ? ? ReactDOM.render(<A/>, document.getElementById("test")); ?
? ? </script>
</body>
</html>
======================
============
附上图片
?
?
