React 基础

一、React历史背景和特性

        1.传统的UI操作关注了太多细节。

              例如做消息列表，传统的jquery会对新消息创建dom节点，并增加到ui上。

              而react通过state维护消息列表，state变更后自动刷新ui。

        2. 并且应用程序状态分散在各处，难以跟踪和维护。

二、组件

        以组件树的形式组织整个UI结构。

        如一个评论框:

export CommentBox = () => {
    return (
    

        
Comments
        
            
    
)
}

  React 组件(纯函数) -> props + state = view

  组件创建三要素:

        1.静态UI组成

        2.组件的状态

        3.组件的交互方式

  创建组件原则:

        1.单一职责

        2.组件负责，拆分小组件

        3.组件无状态，所有数据通过props获取

举个例子: 计时器

import React from 'react';

class Timer extends React.Component{
    // 构造方法
    constructor(props){
        super(props);
        this.state = {
            seconds: 0
        }
    }
    
    // 挂载方法
    componentDidMount(){
        this.timeId = setInterval(()=>this.tick(), 1000)
    }
    // 卸载方法
    componentWillUnmount(){
        clearInterval(this.timeID);
    }

    tick(){
        this.setState({seconds: this.state.seconds + 1})

    }
    
}

三、JSX

 语法糖，能在js中直接写html

const name = 'vicyor'
const element = 
Hello,{name}

解语法糖后


const name = 'vicyor'
const element = React.createElement(
    'h1', {className:"comments"}, 'Hello, ', name
)

约定

1.小写的tag是原生dom节点，如

2.大写的tag是自定义组件，如

四、虚拟DOM virtual DOM

        react内部维护一个dom树，当react state变更时候，判断新老虚拟dom树差异，对变化部分进行实际的dom操作，减少dom频繁更新。

五、Context API

        context api 主要用于组件间全局状态共享

const ThemeContext = React.createContext('light');

class App extends React.Component{
    render(){
        return (
            
                
            

        );
    }
}

function ThemedButton(props){
    return (
        
            // theme 是 dark
            {theme => }
        
    );
}

tips: context的value没法直接变更，但可以用 value = {a, setA}将state作为参数。state变化后也会刷新Context

六、用脚手架创建React项目

        前端项目比较复杂，依赖比较多，需要脚手架进行操作创建项目。

        1.create-react-app

        2.rekit

        3.codesandbox.io 

                在线ide环境

七、打包和部署(忽略)

        1.打包原因

                1.编译es6语法特性，编译jsx

                2.整合资源，例如图片，less/sass

                3.优化代码体积

       2. 工具 -> webpack

       3.注意事项(webpack配置)

                1.nodejs 环境是否为production

                2.禁用开发时专用代码，比如logger

                3.设置应用根路径  (/front)