React(props+state+组件生命周期)

主要是在前人的基础上，对react的一些小总结，包括react的props、state和组件生命周期。

// 文件的引入,值得说明一点的是在react中引入外部文件都是用import
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { DatePicker, Menu, Icon,Input } from 'antd';

//createClass创建组件,而且组件名首字母必须是大写的
var TestOne = React.createClass({
  getDefaultProps:function(){
    return {hname:"没有设置名字就显示这个默认的吧"};
  },
  render:function(){
    return 
{this.props.hname}
;
  }
});

var TestTow = React.createClass({
  render:function(){
    return 
200}}>"1122112123" />
;
  }
});


/*
  ...this.props
  props提供的语法糖，可以将父组建中的全部属性都复制给子组建  需求：定义一个组建link，link组建中只有一个 a ，我们不设置属性，所有属性从父组建自动复制得到
*/
var Link = React.createClass({
  render:function(){
    return(
      this.props}>{this.props.text}
    )
  }
});

/*
  this.props.children   children:表示组件的所有子节点 ， children 组件属性不跟组件的属性对应的，是一个例外。
  定义一个列表组件，列表项中显示的内容，以及列表项的数量都由外部决定
  总结：this.props 传的是属性的值  ，而  this.props.children传的是子节点
*/
var ListComponent = React.createClass({
  render:function(){
    return(
      

          {
            /*
              列表项目的数量和内容不确定，在创建模板调用时才能给出数据
              利用 this.props.children 从父{组件}获取需要展示的列表项内容

              获取到列表内容后，需要遍历children，逐项进行设置   使用 React.Children.map 方法
              返回值：数组对象，当前应该返回数组中的元素是 li
            */
            React.Children.map(this.props.children,function(child){
              // thild 是遍历得到的父 组件 的子节点
              return 
{child}
            })
          }
      
    );
  }
});


/*
  属性验证   propTypes  ，  组件类 的属性 ， 用于验证组件实例的属性是否符合要求
  propTypes: {
  title: React.PropTypes.string.isRequired,
  },
*/

/*
    事件处理 react中的事件名称，首字母小写，驼峰命名法  案例：定义一个组件 button ，给button添加 onClick事件
*/
var MyButton=React.createClass({
  handleClick:function(){
    alert('点击了');
  },
  render:function(){
    return (
      this.handleClick}>{this.props.ButtonValue}
    )
  }
});

/*
  state 状态  （props 组件自身的属性） this.state来设置不同的状态
  需求：创建一个 CheckButton 组件，包含一个 checkbox类型的 ，让checkbox在选中和未选中时显示不同的文字。根据checked状态来判断。
*/
var CheckButton = React.createClass({
  //定义初始状态
  getInitialState:function(){
    return {
      // 在这个对象中 设置的属性，将会存储在 state 中 ， 现在设置默认的状态：未选中
      isCheck:false
    }
  },
  //定义事件绑定的方法
  handleChang:function(){
    //修改状态的值，通过 this.state 读取设置的状态值
    this.setState({
      isCheck:!this.state.isCheck
    });
  },
  render:function(){
    //根据不同的状态值，设置显示的文字。在JSX语法中，不能直接使用if，可以在外部调用函数使用，这里可以使用三目运算符
    var text = this.state.isCheck ? '已经选中' : '没有选中';
    return(
      
'checkbox' onChange={this.handleChang} />{text}
    )
  }
});


/*
  同上：state来设置状态。需求：定义一个输入框组建，将用户输入的值进行实时显示在 输入框下面； 分析：组建与用户交互过程中，存在状态的变化，即输入框中的值。
  这里没有调试出来。不知道什么原因
*/
var ChInput = React.createClass({
  //定义一个初始状态值
  getInitialState: function(){
    return (
      value: "请输入"
    )
  },
  //通过 event.target 来获取当前输入的内容
  handleChange:function(event) {
    this.setState ({
      value: event.target.value
    });
  },
  render: function(){
    var value = this.state.value;
    return (
      

        'text' value={value} onChange={this.handleChange} />
        
{value}
      
    );
  }
});

/*
  生命周期介绍
  1、组件的生命周期分为三个状态：
  Mounting:组件挂载，已插入真实 DOM
  Updating：组件更新，正在被重新渲染
  Unmounting：组件移出，已移出真实 DOM
  2、组件的生命周期可分为四个阶段： 创建、实例化、更新、销毁

  一、Mounting/组件挂载相关：
  1、componentWillmount 组件将要挂载。在render之前执行，但仅执行一次，及时多次重复渲染该组件，或者改变了组件的state
  2、componentDidMount  组件已经挂载。在render之后执行，同一个组件重复渲染只执行一次

  二、Updating/组件更新相关：
  1、componentWillReceiveProps（object nextProps）  已加载组件收到信的props之前调用，注意组件初始化渲染时则不执行
  2、shouldComponentUpdate（object nextProps，object newxState）  组件判断是否重新渲染时调用。该接口实际是在组件接收到了新的 props 或者新的 state 的时候 会立即调用，然后通过
  3、componentWillUpdate（object nextProps，object nextState）  组件将要更新
  4、componentDidUpdate（object prevProps ， object prevState） 组件已经更新

  三、Unmounting/组件移除相关：
  1、componentWillUnmount  在组件要被移除之前的时间点触发，可以利用该方法来执行一些必要的清理组件将要移除

  四、生命周期中 与 props 和 state 相关：
  1、getDefaultProps  设置 props属性默认值
  2、getInitialState  设置state 属性初始值
*/

var Demo = React.createClass({
  //  一、创建阶段   流程： 只调用 getDefaultProps 方法
  getDefaultProps:function(){
    console.log("getDefaultProps");
    return {};
  },

  // 二、实例化 阶段   流程： 1、getInitialState  2、componentWillMount  3、render  4、componentDidMount
  getInitialState:function(){
    // 设置this.state 的默认值
    console.log("getInitialState");
    return null;
  },

  render:function(){
    //  渲染并返回一个虚拟 DOM
    console.log("render");
    return 
Hello react
  },

  componentDidMount:function(){
    //  在 render 之后调用 ，在该方法中，React会使 render 方法返回的虚拟DOM对象 创建真实的DOM 结构，可以在这个方法中读取DOM节点
    console.log("componentDidMount");
  },

  // 三、更新阶段  流程： 1、componentWillReceiveProps  2、shouldComponentUpdate（如果返回false，后三个方法不执行）  3、componentWillUpdate  4、render  5、componentDidUpdate
  componentWillReceiveProps:function(){
    console.log("componentWillReceiveProps");
  },

  shouldComponentUpdate:function(){
    console.log("shouldComponentUpdate");
    return true //是否需要更新
  },
  componentWillUpdate:function(){
    console.log("componentWillUpdate");
  },
  componentDidUpdate:function(){
    console.log("componentDidUpdate");
  },

  // 四、销毁阶段   流程 ： componentWillUnmount
  componentWillUnmount:function(){
    console.log("componentWillUnmount");
  }
});

  // 第一次 创建组件 并 加载组件
  ReactDOM.render(
    ,
    document.getElementById('root')
  );

  // 第二次 重新渲染更新
  ReactDOM.render(
    ,
    document.getElementById('root')
  );

  //  移除组件
  ReactDOM.unmountComponentAtNode(
    document.getElementById("root")
  );

var AppMenu = React.createClass({
  render:function(){
    return(
      

        this.props.a1name}/>
        
        "http://www.baidu.com" text="中间的内容吧" />
        '点我把' />
        

      
    );
  }
});


ReactDOM.render(
  "如果没有设置上面有默认的名字"/>,
  /* 使用 children 子节点 好像只能调用到 DOM 中。。
  
  
123
  
123
  
123
  ,
  */
  document.getElementById('root')
  //document.body
);

参考网址https://github.com/tz198849/React-Antd-Study-Dome1