记录React 的安装与运用以及生命周期

安装

首先需要确保NodeJS在较新的版本，输入以下命令可以下载搭建本地环境。

npx create-react-app my-app

进入项目目录cd my-app后输入命令 npm start 启动项目。

概念

JSX

JSX是JavaScript中的语法拓展，在React中配合使用。

const ele = <h1>Hello World</h1>;
ReactDOM.render(
	ele,
	document.getElementById('root')
);

JSX也是一个表达式，我们可以使用if语句或者for语句

ReactDOM.render(ele(false),
  document.getElementById('root')
);

function ele(bool){
  if(bool){
    return <h1>Hello World</h1>
  }
  return <h1>Sorry</h1>
}

JSX遵循XML规范，必须有闭合标签，JSX最终会被Babel给转义React.createElement()函数调用。

渲染

React对象是一个不可变的对象，已经创建，就无法更改，我们需要重新使用ReactDOM.render()函数将元素渲染到文档中。

ReactDOM.render(el,Node);

ReactDOM更新前会与之前的状态比较，它会更新它需要更新的部分。

组件

我们可以直接使用函数的形式定义组件，props用于接收自定义属性。

// Ele.js
import React from 'react'
export default function Ele(props){
    if(props.bool){
        return <h1>Hello World</h1>
    }else{
        return <h1>Sorry</h1>
    }
}

也可以使用ES6中的Class来定义组件，this.props用于接收自定义属性。

// Ele.js
import React , { Component } from 'react'
export default class Ele extends Component{
    render(){
        if(this.props.bool){
            return <h1>Hello World</h1>
        }else{
            return <h1>Sorry</h1>
        }
    }
}

我们在首页中导入这个组件，并且我们可以自定义传递属性。

import Ele from './Ele'
React.render(<div>
	<Ele bool={true}>
</div>,document.getElementById('root'))

状态

每个组件都有自己的状态管理，其本质就是一个属性。

import React, { Component } from 'react'

export default class Tick extends Component {
    constructor(props){
        super(props);
        this.state = {
            left: props.number
        }
    }
    
    render() {
        return (
            <div>
                {this.state.left}
            </div>
        )
    }
}

在constructor下可以使用this.state设置组件的状态，状态改变将触发render()函数，如下一个计时器的Dome，我们不能够直接去改变状态中的数据，否则React会检测不到数据的变化，必须使用this.setState({})改变数据。

import React, { Component } from 'react'

export default class Tick extends Component {
    constructor(props){
        super(props);
        this.state = {
            left: props.number
        }
        this.timer = setInterval(() => {
            this.setState({
                left : this.state.left -1
            })

            if(this.state.left == 0){
                clearInterval(this.timer)
            }
        }, 1000);
    }
    
    render() {
        return (
            <div>
                倒计时剩余时间{this.state.left}
            </div>
        )
    }
}

事件

在react中，组件的事件本质上是一个属性，我们可以通过以下两种方式绑定事件。

function handleClick(e){
    console.log(e)
    console.log("点击了");
}
const btn = <button onClick={handleClick} onMouseEnter = {(e)=>{
    console.log("移入了",e)
}}>点击</button>
ReactDOM.render(btn,document.getElementById("root"))

生命周期

react的生命周期分为三个阶段，挂载阶段，更新阶段，销毁阶段。

挂载阶段

初始化阶段 constructor()

    constructor(props){
        super(props);
        this.state = {
            n : 0
        }
        console.log("constructor","一个新的组件诞生了!!")
    }

初始化属性和状态，此时不允许使用setState，因为组件尚未挂载，setState会去调用render()函数。

即将挂载阶段 componentWillMount()

    componentWillMount(){
        console.log("componentWillMount","组件即将被挂载")
    }

即将挂载到页面时组件渲染虚拟DOM，触发render()函数渲染页面

虚拟DOM render()

    render() {
        console.log("render","渲染，返回的react元素经过React.createElement方法挂载到虚拟的DOM树上")
        return (
            <div>Hello World</div>
        )
    }

挂载完成 componentDidMount()

    componentDidMount(){   
        console.log("componentDidMount","挂载完成")
    }

此时虚拟DOM已经变成了正式的DOM

更新阶段

接受到新的属性值 componentWillReceiveProps()

    componentWillReceiveProps(nextProps){
        console.log("componentWillReceiveProps","接收到新的属性值",this.props,nextProps)
    }

是否更新渲染 shouldComponentUpdate()

    shouldComponentUpdate(nextProps,nextState){
        // return false  最暴力的，直接不让重新渲染
        console.log("shouldComponentUpdate","是否应该重新渲染",nextProps,nextState)
        if(this.props.n === nextProps.n && this.state.n === nextState.n){
            return false;
        }
        return true;
    }

组件重新渲染 componentWillUpdate()

    componentWillUpdate(nextProps,nextState){
        console.log("componentWillUpdate","组件即将被重新渲染",nextProps,nextState)
    }

虚拟DOM render()

    render() {
        console.log("render","渲染，返回的react元素经过React.createElement方法挂载到虚拟的DOM树上")
        return (
            <div>Hello World</div>
        )
    }

完成渲染 componentDidUpdate()

    componentDidUpdate(prevProps,prevState){
        console.log("componentDidUpdate","组件已经重新渲染完成",prevProps,prevState)
    }

销毁阶段

销毁 componentWillUnmount()

    componentWillUnmount(){
        console.log("componentWillUnmount","组件被销毁")
    }