从“零”开始的前端面试笔记（二）

使用babel可以在JS文件中启用jsx（符合XML规范的JS）支持
const mydiv = <div id="mydiv" title="div title">这是一个div元素</div>
等价于(通过babel转换成)
const mydiv = React.createElement('div', {id: 'mydiv', title: 'div title'}, '这是一个div元素')

在jsx中混合写入js表达式：在jsx语法中，要把JS代码写到{ }中
需要使用className来替代class;htmlFor替代label的for

ES6展开运算符...

class关键字是语法糖

用构造函数创建出来的组件，叫“无状态组件”；

function Hello(props){
    return <div> 这是一个Hello组件 {props.xxx}</div>
}

用class关键字创建出来的组件，叫做“有状态组件”

import React from 'react'
export default class Hey extends React.Component{
    constructor(){
        super()
        this.state = {}
    }
    
    render()
    {
        return  <div>   这是Hey组件 - this.props.xxx </div>
    }
}

ReactDOM.render(<div>
    <Hello></Hello>
    <Hey {...user}></Hey>
</div>, document.getElementById('app'))

在class关键字创建的组件中，不需要接收外界传递过来的props参数，直接通过this.props.xxx接收即可

有状态组件和无状态组件之间的本质区别就是：有无state属性和有无生命周期函数