React-cli基础知识总结（一）

Daisy__1

已于 2023-05-23 16:28:36 修改

阅读量174

点赞数

文章标签： react.js javascript 前端

于 2023-04-21 18:14:24 首次发布

本文链接：https://blog.csdn.net/Daisy_1/article/details/130294326

版权

本文介绍了React中组件间通信的方法，包括父组件向子组件传递数据，子组件向父组件传递数据，以及兄弟组件间使用发布订阅模式通信。同时，针对跨域问题，文章提出了通过配置代理解决，并展示了在setupProxy.js中的实现。此外，还探讨了函数式组件如何利用useEffectHook模拟生命周期方法。

摘要由CSDN通过智能技术生成

一、组件通信

【父组件】给【子组件】传递数据:通过props传递
父组件：

import List from './components/List' // 引入子组件List

<List todos={todos}/>  // 给子组件List传递参数todos

子组件：

const {todos} = this.props // 使用props接收

【子组件】给【父组件】传递数据:通过props传递,要求父提前给子传递一个函数
父组件：

import List from './components/List' // 引入子组件List

updateTodo = () => {
  // 函数体内容
}

<List todos={todos} updateTodo={this.updateTodo}/>  // 给子组件List传递一个函数用来处理state数据

子组件：

const {todos, updateTodo} = this.props  // 使用props接收

【兄弟组件】通信，使用发布订阅模式
发送数据组件：

import PubSub from 'pubsub-js'  // 引入第三方库

const topic = 'xxx'
const data = 'xxx'
PubSub.publish(topic, data)  // 根据约定好的topic，发送data数据

接收数据组件：

import PubSub from 'pubsub-js'  // 引入第三方库

// 组件加载完毕之后订阅消息
componentDidMount() {
	const topic = 'xxx'
	this.token = PubSub.subscribe(topic, (_, data) => {
	  // 处理接收到的data数据
	})
}

// 组件卸载前取消订阅操作
componentWillUnmount() {
	PubSub.unsubscribe(this.token)
}

二、配置代理

为了解决跨域，前端可以配置代理的方式，跨域的大致原理如下图示：

解决方法：

在src目录下新建文件setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(
        createProxyMiddleware('/api1', { 
            //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
            target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
            changeOrigin: true, //控制服务器接收到的请求头中host字段的值
            pathRewrite: { '^/api1': '' } //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
        }),
        createProxyMiddleware('/api2', { 
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite: { '^/api2': '' }
        })
    )
}

三、函数式组件的生命周期

生命周期一般是对于类式组件而言的，函数是没有生命周期的，但可以使用useEffect（hook函数）在代替生命周期

import React, {useState, useEffect} from "react";
import ReactDOM from 'react-dom'

// useEffect（fn，？）第一个参数是特定实时机执行的回调函数，第二个参数是指什么时机
export default function App() {
  const [count, setCount] = useState(0)

  // 模拟componentDidMount第一次渲染
  useEffect(() => {
      console.log('App---第一次渲染');
  }, []) // 第二个参数为空时只会在第一次渲染时执行

  // 模拟componentDidUpdate
  useEffect(() => {
    console.log('App---n变化了');
  }, [count]) // 第二个参数为要监听的数据

  // 不传第二个参数，则会在 state 的任意一个属性改变时 都会触发该函数回调
  useEffect(() => {
    console.log('App---任意属性变化');
  })

  // 模拟componentWillUnmount
  useEffect(() => {
    console.log('App---任意属性变了');
    return () => {
        console.log('App---该组件要销毁了');
    }
  })

  const handleSum = () => {
    setCount(count + 1)
  }

  const handleUnmount = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  return (
    <div>
      结果：<h2>{count}</h2><br/>
      <button onClick={handleSum}>点击+1</button><br />
      <button onClick={handleUnmount}>卸载组件</button>
    </div>
  )
}