React学习之路 二（React自定义组件）

一、React自定义组件

1.1，函数式声明组件
顾名思义，就是将一个函数作为一个组件（函数名第一个字母大写是组件，小写是函数）

<div id="test1">div>
<script type="text/babel">
   /**
    * 1.声明一个简单的函数式组件
    */
   function MyComponent(){
       return (
	     <div>
	         <h3>我是函数式声明的组件</h3>
	         <h3>我没有this,因为默认开启了严格模式</h3>
	     </div>
 		)
   }
   /**
    * 2.调用组件
    */
   ReactDOM.render(<MyComponent/>,document.getElementById('test1'));
script>

调用组件并且给组件传参

<div id="test1">div>
<script type="text/babel">
     /**
     * 1.父组件
     */
    function FartherComponent(){
        return (
         <div>
             <h1>父组件给子组件传值</h1>
             /**
              * 调用子组件，并且给子组件传值book=1
              */
             <ChildComponent book={1}/>
         </div>
        )
    }
	/**
	* 2.子组件
	* @param {Object} props 父组件给子组件传递的参数
	*/
    function ChildComponent(props){
    	/**
    	 * props是父组件给子组件传递的参数对象，book是参数对象中的一个属性
    	 */
        return <p>子组件接收到的值是: {props.book}</p>
    }
    ReactDOM.render(<FartherComponent/>,document.getElementById('test1'));
script>

1.2，类式声明组件

 <div id="test">div>
 <script type="text/babel">
      /**
       * 1.使用类声明一个组件
       */
      class MyComponent extends React.Component {
      	/**
      	 * 构造器的作用
      	 * 1，指定this
      	 * 2，设置初始化状态this.setState({});
      	 * 3，为构造函数绑定this
      	 */
      	constructor(props) {
              super(props);//指定this，可以使用this
              //this.state = {name:'name',value:'value'}设置初始化状态
              //this.attr = this.attr.bind(this)为事件处理函数绑定实例
          }
      
          render(){
              return (
                  <div>
                      <h3>这是用类创建出来的组件,接收数据是：{this.props.data}</h3>
                  </div>
              )
          }
      }
      /**
       * 2.调用组件并且传递参数
       */
      ReactDOM.render(<MyComponent data='接收数据'/>,document.getElementById('test'));
 script>

二、React组件的生命周期

2.1概念
什么是生命周期？
答：生命周期就是记录从出生到死亡的一个过程，对于组件来说就是从创建到销毁所经历的阶段以及该阶段调用的方法。
为什么要学习生命周期？
答：我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作，比如组件挂载时执行但是组件更新时不执行的一些功能。
2.2探索生命周期的实践
react自带了描述生命周期的钩子函数（我们可以暂时将他们理解为组件生命周期的特定阶段）
constructor（）：构造函数（胎儿）
componentWillMount()：组件将要挂载（临产）
componentDidMount()：组件已经挂载（刚出生）
shouldComponentUpdate()：组件该更新了（生日前两天）
componentWillUpdate()：组件将要更新了（生日前一天）
componentDidUpdate()：组件已经更新了（过完生日后一天）
componentWillUnmount()：组件将要卸载了（去世当天）
实践代码如下：

<div id="test">div>
<script type="text/babel">
	/**
	 * 定义一个组件 
	 */
    class Life extends React.Component {
		//第一执行
        constructor(props) {
            super(props);
           	//设置初始值count = 0
            this.state = {
                count: 0
            }
            console.log('生命周期阶段：constructor')
        }
        
        //第二执行
        componentWillMount(){
            console.log('生命周期阶段：componentWillMount,组件将要被挂载')
        }

		//第三执行
        render() {
            console.log('生命周期阶段：render,组件被渲染');
            return (
                <div>
                    <div style={{float:'left'}}>
                        <h3>当前数字：{this.state.count}</h3>
                        <button onClick={this.addNum}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                    </div>

                </div>
            );
        }
        
        //第四执行
        componentDidMount(){
            console.log('生命周期阶段：componentDidMount,组件被挂载了')
        }

        
         /* 自定义方法 */
        addNum = ()=>{
            let count = this.state.count;
            count += 1;
            console.log('进入自定义方法： addNum')
            this.setState({ count })//这个方法可以调用组件更新
        }

        death = ()=>{
        	console.log('调用方法销毁组件之前')
            ReactDOM.unmountComponentAtNode(document.getElementById('test'));
            console.log('已经调用方法销毁了组件： ReactDOM.unmountComponentAtNode()')
        }

        shouldComponentUpdate(){
            console.log('控制组件是否能更新:shouldComponentUpdate');
            return true
        }

        componentWillUpdate(){
            console.log('生命周期阶段：componentWillUpdate,组件将要被更新')
        }

        componentDidUpdate(){
            console.log('生命周期阶段：componentDidUpdate,组件已经被更新了')
        }

        componentWillUnmount(){
            console.log('生命周期阶段：componentWillUnmount,组件将要被卸载')
        }

    }

    ReactDOM.render(<Life/>,document.getElementById('test'))
script>

初始化加载组件时，生命周期方法运行顺序：

【点击+1】按钮时，生命周期方法运行顺序：

点击【卸载组件】按钮时，生命周期的运行顺序：