React基础（复习自用，欢迎补充）

此篇仅包含基础React，无eslint和Redux等其他。

前置准备--安装官方脚手架

• 在VSCODE终端中输入命令：npm i -g create-react-app

创建React项目

• 使用脚手架创建项目 

1. 命令：create-react-app 项目名称

• 使用npx创建项目

1. 命令：npx create-react-app 项目名

创建完成终端提示如下图：

React编程简要

React采用JSX的语法进行（ JavaScript and XML ）编程 以组件的方式来创建各种元素 

在代码中通过 { } 来包括JavaScript代码

当遇到 '<'，JSX就当作HTML解析，遇到  '{'  就当JavaScript解析

React入门

React 组件使用一个名为 render() 的方法，接收输入的数据并返回需要展示的内容。

先前创建了一个reactdemo2的项目在public中我们可以看见一个index.html

 该页面是给我们布置组件用的。这里有个div设置了id为root

那么src中有各种js脚本及样式表 在脚本中我们对组件进行操作和渲染（为了演示，我将src中的文件全部清空）

创建一个新的index.js 并引入React、ReactDOM、App。

 在index.js 中 首先获取ReactDome元素 对该元素进行渲染。当组件的状态数据改变时，组件会再次调用 render() 方法重新渲染对应的标记。

在index.js中，这样操作成功将App的组件挂载到html文件下id为root的标签中

import React from "react";
import { ReactDOM } from "react";
import App from "./App";

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

再次新建一个App.js组件

import React, { Component } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 1
        }
        this.toShow = this.toShow.bind(this)
    }

    render() {
        return (
            <ul className='Jess'>
                <button onClick={this.toShow}>点击改变</button>
                <li
                    className={'a' + this.state.id}
                >{1 + 1 > 2 ? '1 + 1 > 2 is true' : '1 + 1 > 2 is false'}</li>
                <li>I Love React</li>
            </ul>
        );
    }
    toShow() {
        this.setState({
            id: this.state.id + 1
        })
        console.log(this.state.id);
    }
}

export default App;

相关函数或属性或方法：

• constructor 构造函数 每个组件必须要有
• state 是 组件的状态，通过state完成对行为的控制、数据的更新、界面的渲染，由于组件不能修改传入的props，所以需要记录自身的数据变化。
• state的改变是利用setState函数来操作的。其他修改方式都是错误的
• state状态的改变setState是异步的，若有函数要及时调用应该在setState中使用回调函数
• render（）是渲染组件的一个方法，每当state改变的时候都会重新调用一次render（）方法重新进行渲染

接收父组件传值

创建kid.js 来作为子组件，父组件调用子组件，并进行传值

// kid.js
import React, { Component } from "react";
class kid extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <li>I'm the kid Hello{this.props.content}</li>
        );
    }
}

export default kid;

// --------------------------------------
import React, { Component } from 'react';
import Kid from './kid.js';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: 1
        }
        this.toShow = this.toShow.bind(this)
    }

    render() {
        return (
            <ul className='Jess'>
                <button onClick={this.toShow}>点击改变</button>
                <li
                    className={'a' + this.state.id}
                >{1 + 1 > 2 ? '1 + 1 > 2 is true' : '1 + 1 > 2 is false'}</li>
                <li>I Love React</li>
                <Kid
                    content='Jess'
                >

                </Kid>
            </ul>
        );
    }
    toShow() {
        this.setState({
            id: this.state.id + 1
        })
        console.log(this.state.id);
    }
}

export default App;

父组件引用子组件的方法

先在文件头引入子组件  import Kid from './kid.js';  组件名一定要大写，否则会报错（Kid）

然后以标签的形式来引入组件；在父组件的render方法里，return中使用标签的形式引入子组件

        <Kid content='Jess' >  </Kid>

 标签中的属性即为父组件传递给子组件的数据 子组件通过props来接收

 render() {
        return (
            <li>I'm the kid Hello{this.props.content}</li>
        );
    }

父组件传递了 content = ’Jess‘ 到子组件中，子组件通过this.props.content来接收父组件的数据

注意：最外层必须要套上一个div或者另外的块元素标签

在布局的时候通常这些多出的标签就会影响 所以 在引入一个Fragment碎片的模块

Fragment需要引入：import React,{Component,Fragment} from "react";

使用Fragment后 网页源代码中不会出现有外层Fragment标签

 如下代码段所示：

<Fragment>
    <Kid content='Jess'>
    </Kid>
</Fragment>

React的生命周期函数

• 初始化阶段 初始化props和state 对应 constructo（）构造函数
• 挂载阶段（3个小阶段）分别对应三个函数

1. 组件即将挂载到页面的时刻 componentWillUnmount()
2. 组件挂载的时刻 render()
3. 组件挂载完成的时刻 componentDidMount()

• 更新阶段 数据的更新则触发该阶段的函数

 其他的不多说，重点看shouldComponentUpdate() 和 componentWillUpdate()

用shouldComponentUpdate来优化性能，在返回false的时候不触发componentWillUpdate

通常，当setState方法执行的时候，方法所在的组件及其子组件都会调用一次render方法，会造成对其他组件的不必要渲染。

因此通过shouldComponentUpdat来控制何时对组件进行渲染

// App.js  
  render() {
        return (
            <ul className='Jess'>
                <button onClick={this.toShow}>点击改变</button>
                <li>I Love React</li>
                <Fragment>
                    <Kid
                        content='Jess'
                    >
                    </Kid>
                </Fragment>
            </ul>
        );
    }
    toShow() {
        this.setState({
            id: this.state.id + 1
        })
        console.log(this.state.id);
    }

// kid.js
    shouldComponentUpdate(nextProps, nextState) {
        return nextState.content !== this.State.content
    }

    render() {
        return (
            <li>I'm the kid Hello{this.props.content}</li>
        );
    }

shouldComponentUpdate函数判断当前的状态是否和下一个即将发生改变的状态一致，是的话返回false 不执行componentWillUpdate。这样就可以解决父组件在改状态改变时连同子组件一起重新渲染的问题。属于一个优化性能的方面

利用axios来获取数据

首先在项目文件下安装axios ：npm install -save axios

在文件中引用axios ： import axios from 'axios';

在组件挂载完成后运行（即 componentDidMount()函数）

代码示意如下：

componentDidMount(){
                axios.get('https://mock.mengxuegu.com/mock/628c2a82cc411017d3bb59b9/ReactDemo01/Lady')
        .then((res)=>{
            console.log('axios获取成功'+JSON.stringify(res))
            this.setState({
                // 两层的data
                list:res.data.data
            })
        })
        .catch((error)=>{console.log('axios获取数据失败：'+error);})
    }

这里的axios可以附带回调函数，获取对象res后记得通过res.data调用请求的数据。

        下一个目标学习Redux。欢迎各位补充说明！