新闻网react之es6

es6

问题一：解构语法(es6)

语法： const {} = React;

问题二： es5写组件方式

React.createClass({
    render:function(){
    }
})

问题二：es6写组件方式

class Header extends Component {
    render() {
        return (
            <div className="header">
            </div>
        )
    }
}

问题三：es5状态写法

React.createClass({
    // 状态写法
    getInitialState:function(){
        return {
            // key:value
            list: props.data.list
        }
    },
    render:function(){
    }
})

问题三：es6状态写法

class Header extends Component {
        // 定义构造函数，将属性数据转化成状态数据
    constructor(props) {
        super(props)
        // 将属性数据转化成状态数据
        // 这里的赋值相当于创建期
        this.state = {
            list: props.data.list
        }
    }
    render() {
        return (
            <div className="header">
            </div>
        )
    }
}

问题四：es6 constructor里面必须调用super(参数)

    // 定义构造函数，将属性数据转化成状态数据
    constructor(props) {
        super(props)
        // 将属性数据转化成状态数据
        // 这里的赋值相当于创建期
        this.state = {
            list: props.data.list
        }
    }

问题五：react生命周期

常用

componentDidMount // 初始化数据
componentWillReceiveProps // 评论追加使用

问题六：不知道this.setState({})

this.setState({ //修改数据
    list:'' // 替换数据
})
// 换句话说，不能这么些
this.state.list = '大象'； // 修改不能这么修改
var val = this.state.list ; //读取可以这么读