React骨折入门
前端

最近赶上项目react重构,正好也有点遗忘了...(bu hui le)趁这个机会来梳理一波把,后期关于redux,redux-saga,hook都会慢慢输出哈~路过的客官大老爷敬请指正哈


1、什么是JSX

一个JSX语法的示例,如下所示

const msg = 'world!';
const element = (
    <h1>Hello, {msg}</h1>
);

ReactDOM.render(
    element,
    document.getElementById('app')
)

这种语法形式,既不是HTML,也不是字符串,而是称之为JSX,是React里用来描述UI和样式的语法,JSX最终会被编译为合法的JS语句调用(编译器在遇到{时采用JS语法进行解析,遇到<就采用HTML规则进行解析)


2、JSX实质

JSX通过babel编译,编译给React.createElement()调用。如下JSX代码:

const element = (
    <h1 className='container'>
        Hello, world!
    </h1>
);

等同于如下代码:

const element = React.creatElement(
  'h1',
  {className: 'container'},
   'Hello, world!'
)

React.createElement()方法会首先进行一些避免BUG的检查,然后返回类似以下例子的对象:

const element = {
    type: 'h1',
    props: {
        className: 'container',
        children: 'Hello, world!'
    }
}

这样的对象,则称为react元素,代表所有呈现在屏幕上的东西。React正是通过读取这些对象来构建DOM,并且保持数据和UI同步的


3、渲染

在React中,使用ReactDOM.render()方法来将React元素渲染进一个DOM中。如:

ReactDOM.render(
    element,
    document.getElementById('app')
)

4、组件和Props

组件(component)能够将UI划分为独立的、可复用的部分,这样我们就只需专注于构建每一个单独的部件。 从概念上看,组件就像是函数:接受任意的输入(称为属性,props),返回React元素。React中有两种定义组件的方式:函数定义和类定义

1、函数定义组件

function Welcome (props) {
    return <h1>Hello, {props.name}</h1>;;
}

2、类定义组件

class Welcome extends React.Component {
    render () {
        return <h1>Hello, {this.props.name}<h1>;
    }
}

3、组件渲染

上述定义了Welcome组件,并Welcome组件中声明了一个属性name,而这个属性将以props.name的方式传到组件内部,方法如下:

ReactDOM.render(
    <Welcome name="everybody" />,
    document.getElementById('root')
)

最终就会以<h1>Hello everybody</h1>的方式呈现


5、State和生命周期

使用类定义组件有一些额外的好处,如拥有本地状态这一特性。 以下是一个类定义组件

class Clock extends React.Component {
    render () {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>Now is {this.props.date}</h2>
            </div>
        );
    }
}

需要注意的有:

· 类名即为组件名(无论是函数定义组件还是类定义组件,组件名称的首字母都必须大写,并且继承自React.Component)

· 使用 render() 方法,用来返回需要呈现的内容

1、在组件中使用State

state是属于一个组件自身的。我们可以在类的构造函数constructor中来初始化状态,如:

constructor (props) {
    super(props)
    this.state = {
        date: new Date()
    }
}

这样一来便能在render方法中使用this.state.xxx

2、生命周期

React为我们提供了生命周期的钩子函数,方便我们进行使用。在React中,生命周期分为: 1、Mount 已插入真实DOM 2、Update 正在重新渲染 3、Unmount 已移出真实DOM 。生命周期钩子函数有:

componentWillMount
componentDidMount

componentWillUpdate
componentDidUpdate

componentWillUnmount

//以下为特殊生命钩子函数
componentWillReceiveProps  //已加载的组件收到新的参数时调动
shouldComponentUpdate     // 组件判断是否重新渲染时调用

3、夜深了。。明天更~

暂无评论