简单介绍

  • Jul, 05 2019
  • React


description: React简单介绍

简单介绍

本文档示例代码使用语言为typescript

简介

react是Facebook的一个开源JavaScript类库。核心技术和概念为jsx,组件,v-dom,data flow。

jsx

react的模板代码,直接嵌入js代码中,文件后缀为.jsx或者.tsx

组件

stateprops是react组件的两个核心概念

props

// 示例代码
import React, { Component } from 'react';
import { render } from 'react-dom';

const Helloworld = (props) => {
    return <div>{props.str}</div>;
}

// 加载组件到 DOM 
render(<Helloworld str='Hello world!' />, document);

props是在调用组件的时候传入不同的属性,组件内部无法改变自身的props,可以把props看作组件的配置属性。

state

state是组件的当前状态,可以把组件看作一个状态机,根据状态呈现不同的UI展示。一旦状态变更,组件就会自动调用render重新渲染UI,这个更改的动作会通过this.setState方法来触发。其他方式变更state是无法重新渲染的

v-dom

全称Virtual DOM,react实现的虚拟dom。组件dom结构映射在v-dom上,react在v-dom上实现了一个diff算法,当需要重新渲染组件的时候,会通过diff算法去寻找需要变更的组件,再把这个改动更新到浏览器的真实dom上。v-dom是一个纯粹的js数据结构,性能回避原生dom快很多

data flow

单向数据流是react推崇的一种应用架构方式,指只能从一个方向来修改状态,props的变更方式很好的解释了单向数据流

JSX语法

jsx全称为JavaScript XML,是ECMAScript的类似XML的语法扩展。jsx为react开发的一套语法糖,也是react的基础

// 示例代码
const helloworld = <div>Hello world!</div>; // 声明常量无状态组件,纯组件
const helloworldFunc = () => { // 声明无状态组件
    const str = 'Hello world!';
    return <div>{str}</div>;
}
interface Props{
    props1:string
}
interface State{
    state1:string
}
class DemoComponent extends React.Component<Props,State>{// class有状态组件
    render(){
        return <div>Hello world!</div>
    }
}

组件

react在es6中的组件在写法上分为class组件和function组件,在状态上分为有状态组件和无状态组件。

写法区分

class组件

// 示例代码
interface Props{
    props1:string
}
interface State{
    state1:string
}
class DemoComponent extends React.Component<Props,State>{
    render(){
        return <div>Hello world!</div>
    }
}

class组件包含state和完整的react组件生命周期,其中渲染函数为render()

function组件

// 示例代码
interface Props{
    props1:string
}
const helloworldFunc = (props:Props) => {
    const str = 'Hello world!';
    return <div>{str}</div>;
}

function组件中,返回值即为渲染组件,在react16.7版本之前,function组件只能作为无状态组件使用

在react16.7版本中,react引入了react hooks,function组件也可以作为有状态组件来使用了

// react hooks代码示例
import React,{useState} from 'react';
interface Props{
    props1:string
}
const hooksDemo = (props:Props) => {
    const [str,setStr] = useState('hello world!');
    // str即为state.str,setStr即为setState({str}),‘hello world!’为str的初始值
    return <div>{str}</div>;
}

状态区分

无状态组件

无状态组件(Stateless Component)是最基础的组件形式,由于没有状态的影响所以就是纯静态展示的作用。一般来说,各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性(props)加上一个渲染函数(render)。由于不涉及到状态的更新,所以这种组件的复用性也最强

有状态组件

在无状态组件的基础上,如果组件内部包含状态(state)且状态随着事件或者外部的消息而发生改变的时候,这就构成了有状态组件(Stateful Component)。有状态组件通常会带有生命周期(lifecycle),用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的,根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同