2.React的生命周期

1. getdefaultProps,处理属性(获取默认值和校验传递属性类型)
2. getInitialState 处理(执行)状态constructor,创建实例,设置初始状态;
3. componentWillMount: 第一次组件渲染之前(把获取的数据重新赋值给状态或者存放到REDUX中)
4. render:第一次或者重新进行视图的渲染
5. componentDidMount:第一次渲染完成(此处可以获取到DOM元素了)
6. shouldComponentUpdate(nextProps,nextState):是否允许更新组件(性能优化)在初始化时

​ 钩子函数返回true,代表允许视图重新渲染，反之false则停止继续渲染视图

7. componentWillUpdate 组件开始重新渲染之前调用。
8. componentDidUpdate 组件重新渲染并且把更改变更到真实的 DOM 以后调用
9. componentWillUnmount 在组件从 DOM 中移除之前立刻被调用。
10. componentWillReceiveProps(nextProps) {函数在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。（如：当父组件重新渲染,子组件也会重新渲染,同时会触发此钩子）

import React from 'react';
import PropTypes from 'prop-types';
import './Vote.less'

export default class Vote extends React.Component {
    // 初始化属性
    static defaultProps = {
        supNum: 0,
        oppNum: 0
    }
    // 属性规则校验
    static propTypes = {
        title: PropTypes.string.isRequired,
        supNum: PropTypes.number,
        oppNum: PropTypes.number
    }
    constructor(props) {
        super(props);
        this.state = {
            supNum: this.props.supNum,
            oppNum: this.props.oppNum
        }
    }
    // 渲染组件
    render() {
        let { supNum, oppNum } = this.state;
        return <div className='voteBox'>
            <header className='headerBox'>
                <h3>{this.props.title}</h3>
                <span>N:{supNum + oppNum}</span>
            </header>
            <main className="mainBox">
                <p>支持人数:{supNum}</p>
                <p>反对人数:{oppNum}</p>
                <p>支持率:{this.getRatio()}</p>
            </main>
            <footer className='footerBox'>
                <button onClick={this.handle.bind(null, 'supNum')}>支持</button>
                <button onClick={this.handle.bind(null, 'oppNum')}>反对</button>
            </footer>
        </div>;
    }
    //定义一些方法(Vote.property):VUE中写的方法,方法中的this都是VUE的实例,不管怎么调用都是这样,但是REACT中不是,他就是我们原生JS的特性
    // this是不固定的,看如何调用! ==>为了保证this是实例,我们写的方法一般基于箭头函数来构建;
    getRatio = () => {
        let { supNum, oppNum } = this.state,
            ratio = null,
            total = supNum + oppNum;
        ratio = total === 0 ? 0 : supNum / total * 100;
        return ratio.toFixed(2) + '%';
    }
    handle = (type) => {
        let { supNum, oppNum } = this.state;
        if (type === 'supNum') {
            this.setState({
                supNum: supNum + 1
            })
            return;
        }
        this.setState({
            oppNum: oppNum + 1
        })
    }
 }
 
import React from 'react';
import ReactDOM from 'react-dom';
import Vote from './Vote';

import './assets/reset.min.css';

ReactDOM.render(<div>
  <Vote title='今天天气很好~' supNum = {0} oppNum = {0}></Vote>
</div>, document.getElementById('root'))