React学习笔记三

React脚手架生成的index.js内容简介

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
  // 开启严格模式，开启后，可以检测到app组件里的规范，例如使用字符串的 ref=""
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
// 用于记录页面性能
reportWebVitals();

子组件向父组件传值

1、父组件

export default class P extends Component {
    addTodo = name => {
        const { todos } = this.state;
    };
    render() {
        return (
            <div>
                <Header addTodo={this.addTodo}/>
            </div>
        );
    }
}

2、子组件

export default class Header extends Component {
    handleClick = () => {
      this.props.addTodo(88888)
    }
    render() {
        return (
            <div onClick={this.handleClick}>
                Test
            </div>
        );
    }
}

兄弟组件之间传值（消息订阅与发布）

例如有两个兄弟组件 A 和 B。

1、A组件需要接收B组件传递过来的数据，那么A组件需要先订阅一个消息

export default class A extends Component {
    state = {
        items: [],
        isFirst: true,
        isLoading: false,
        error: ''
    };
    componentDidMount() {
        // 订阅一个叫做 STATE 的消息
        PubSub.subscribe('STATE', (msg, state) => {
            console.log(msg, state)
            if (msg === 'STATE') this.setState(state);
        });
    }
    render() {
        return (
            <div></div>
        );
    }
}

2、B组件发布消息给A组件

export default class Search extends Component {
    render() {
        return (
            <div>
                <button onClick={this.searchUser}>搜索</button>
            </div>
        );
    }
    /* 搜索用户 */
    searchUser = () => {
        PubSub.publish('STATE', { isFirst: false, isLoading: true, error: '' });
    };
}

通过reduce实现数组的统计

例如统计数组里面done为true的数量

const arr = [
  {
    name: 'a',
    done: true
  },
  {
    name: 'b',
    done: true
  },
  {
    name: 'c',
    done: false
  }
]
const doneCount = arr.reduce((prev, current) => {
  return prev + (current.done ? 1 : 0)
}, 0)
console.log(doneCount) // 2

React中代理服务器配置跨域的2种方式

1、通过修改package.json方式

例如，需要请求到的服务器的域名及端口为 http://localhost:5000

在package.json文件中，添加以下的选项

{
  ...,
  "proxy": "http://localhost:5000",
  "proxy": "需要代理的服务器域名和端口号"
}

例如，当前启动项目的地址是 http://localhost:3000/

接着将之前的请求地址改为本地的地址

import { Component } from 'react';
import axios from 'axios';
export default class App extends Component {
    getData = async () => {
        try {
            // const res = await axios.get('http://localhost:5000/students'); 修改前
            const res = await axios.get('http://localhost:3000/students'); // 修改后
            const res = await axios.get('/students'); // 或者改成这种
            console.log(res);
        } catch (e) {
            console.log(e);
        }
    };
    render() {
        return <button onClick={this.getData}>click</button>;
    }
}

2、通过 setupProxy 文件

先在 src 下创建 setupProxy.js 的文件

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        /* 遇见 /api1 前缀的请求，就会触发该配置 */
        proxy('/api1', {
            /* 将请求转发给 http://localhost:5000 */
            target: 'http://localhost:5000',
            /* 
             * 控制服务器收到请求头的中 Host 的值
             * 为 true 的时候，服务器端接收到的请求 Host 为 http://localhost:5000
             * 为 false 的时候，服务器端接收到的请求 Host 为 http://localhost:3000
             */
            changeOrigin: true,
            /* 
             * 重写请求路径
             * 将 /api1 替换成空
             */
            pathRewrite: {
                '^/api1': ''
            }
        })
    );
};

发送请求

import { Component } from 'react';
import axios from 'axios';
export default class App extends Component {
    getData = async () => {
        try {
            // 上面的代理后，会将此处的 api1 替换成空，实际请求的地址为 http://localhost:5000/students
            const res = await axios.get('/api1/students');
            console.log(res);
        } catch (e) {
            console.log(e);
        }
    };
    render() {
        return <button onClick={this.getData}>click</button>;
    }
}

React脚手架配置代理.md