课程目标

⼊⻔React，了解常规⽤法；
掌握⾯试中React的基础问题；
掌握React学习路线；

知识要点

● React简介

● JSX模板语法

● props & state

● ⽣命周期

● 事件处理

● 条件渲染

● 列表

补充知识点

Babel编译JSX

JSX通过babel最终转化成React.createElement这种形式

<div>
    <image src="avatar.png" className="img" />
    <Hello />
</div>

会被babel转化成↓

React.createElement(
    "div",
    null,
    React.createElement("img", {
        src: "avatar.png",
        className: "img"
    }),
    React.createElement(Hello, null)
)

在转换过程中，babel在编译时会判断JSX中组件的首字母：

首字母为小写(如上：img), 会被认定为原生DOM标签, createElement 第一个变量会被编译成字符串img
首字母为大写(Hello组件), 会被认定为自定义组件，createElement 第一个变量会被编译成对象Hello

最终都会通过ReactDom.render(...)方法进行挂载

ReactDom.render(<App />, document.getElementById('root'))

无状态组件和有状态组件

什么是无状态组件

只关心数据传递的props, 只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

无状态组件的特点

不需要组件的生命周期和状态管理
无法实例化，所以无法访问this，所以像this.ref, this.state都无法访问

如何使用无状态组件

有两种情况，一是保持html的纯粹性，不需要数据，一种是接收父组件的props或者Redux的store数据

const Title = props => (
    <div>
        {props.title}
    </div>
)

export default Title

如何使用有状态组件

import React from 'react'
class Title extends React.Component {
    constructor(props) {
        super(props)
        this.state = {title: "这是有状态组件"}
    }

    render() {
        return (
            <div>
                {this.state.title}
            </div>
        )
    }
}

export default Title

先早-React基础