Каталог статей
1. реквизит
Реализовать связь между родительским и дочерним компонентами
//父组件
import './App.css';
import React, {
useState } from 'react'
import Home from "./components/Home.jsx"
export default function App() {
const [name,setName]=useState("zhangsan");
return (
<div>
<Home name={
name}/>
</div>
)
}
//子组件
import React from 'react'
export default function Home(props) {
return (
<div>name:{
props.name}</div>
)
}
[Не удалось передать изображение по внешней ссылке, исходный сайт может иметь механизм защиты от кражи ссылок, рекомендуется сохранить изображение и загрузить его напрямую (img-NwpwjVs5-1668410196354) (E:%5Ctypora_data%5C%E7%AC%94 %E8%AE%B0%E5%9B%BE%E7%89%87%5Cimage-20221114104019924.png)]
2. Публикация подписки на сообщения: pubs-sub
props может реализовать общение между отцом и сыном, но нет соответствующего метода для общения между братьями.Чтобы это реализовать, нужно послойно передавать его между многослойными компонентами, передавать информацию общему родительскому компоненту, и затем родительский компонент Способ перехода к подкомпонентам;
Решение:
Внедрив стороннюю библиотеку PubSubJS , вы можете напрямую публиковать сообщения в компоненте, который инициирует событие, и прослушивать сообщения подписки в компоненте, чтобы реализовать связь между одноуровневыми компонентами:
Скачать сторонние библиотеки
npm install pubsub-js --save
использовать
import React from 'react'
import PubSub from "pubsub-js"
import {
Fragment } from 'react'
export default function Home(props) {
const send=()=>{
//发布消息
PubSub.publish("name",props.name)
}
return (
<Fragment>
<div>name:{
props.name}</div>
<button onClick={
send}>发布消息</button>
</Fragment>
)
}
import React,{
useEffect,useState} from 'react'
import PubSub from 'pubsub-js'
export default function About() {
const [name,setName]=useState("");
useEffect(()=>{
//订阅消息
PubSub.subscribe("name",getName);
return()=>{
//组件卸载时，取消订阅
PubSub.unsubscribe("name")
}
})
const getName=(msg,data)=>{
console.log("msg",msg)
console.log("data",data)
setName(data)
}
return (
<div> name:{
name}</div>
)
}
3. Централизованное управление react-redux
React-Redux — это библиотека плагинов, упрощающая использование Redux в React.
скачать
npm install redux react-redux --save
Изменить index.js
ProviderИспользование компонентов: пусть все компоненты получают данные о состоянии, не передавая их по одному.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {
Provider } from 'react-redux';
import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={
store}>
<App />
</Provider>
</React.StrictMode>
);
Создайте папку redux и создайте следующие файлы (когда нужно сохранить много состояний, действие и редуктор также можно создать в папке для удобства управления)
//student_reducer.js
/**
* reducer的作用
* 用于初始化状态，加工状态
* 根据旧状态和action产生新状态
*/
export default function studentReducer(preState=[],action){
const {
type,data}=action;
switch(type){
case 'addStudent':
//不要再原有的preState身上修改，因引preState虽然内容变了，但是数组地址没变，React会认为状态没有改变而不会重新渲染页面
return [...preState,data];
default:
return preState;
}
}
//student_action.js
/**
*表示动作的对象，包含 2 个属性,type和data
*type ：标识属性，值为字符串，唯一，必须属性
*data ：数据属性，类型任意，可选属性
*/
export function addAction(data){
return {
type:"addStudent",data:data}
}
//store.js
/**
*Redux 核心对象，内部维护着 state 和 reducer
*/
import {
createStore,combineReducers} from "redux";
import studentReducer from "./student_reducer.js";
//汇中所有的reducers
const allReducer=combineReducers({
students:studentReducer
})
const store=createStore(allReducer);
export default store;
использовать:
useSelector(): пользователь получает определенный элемент данных в хранилище хранилища данных.Этот хук подпишется на хранилище избыточности, поэтому каждый раз, когда состояние избыточности обновляется, селектор в useSelector() будет пересчитываться, возвращая новый результат , и повторно визуализировать текущие компоненты
//Student.jsx
import React from 'react'
import {
useSelector } from 'react-redux'
import {
Fragment } from 'react'
export default function Student() {
const students=useSelector(state=>state.students)
return (
<Fragment>
<ul>
{
students.map((item)=>{
return <li key={
new Date()}>name:{
item.name} age:{
item.age}</li>
})}
</ul>
</Fragment>
)
}
useDispatch(): обновить данные
//Add.jsx
import React,{
Fragment,useRef}from 'react'
import {
useDispatch } from 'react-redux'
import {
addAction } from '../redux/student_action';
export default function Student() {
const dispatch=useDispatch();
const name=useRef();
const age=useRef();
const add=()=>{
console.log(name.current)
const student={
name:name.current.value,age:age.current.value}
//更新数据
dispatch(addAction(student))
}
return (
<div>
<Fragment>
name:<input type="text" ref={
name}/><br/>
age:<input type="text" ref={
age}/><br/>
<button onClick={
add}>添加</button>
</Fragment>
</div>
)
}
//App.js
import './App.css';
import React from 'react'
import Student from "./components/Student.jsx"
import Add from "./components/Add.jsx"
export default function App() {
return (
<div>
<Add/>
<Student />
</div>
)
}
Эффект:
4. Резюме
Рекомендуемое использование:
- Родительско-дочерние компоненты: реквизит
- Компоненты Brother: публикация подписки на сообщения, реакция-редукция
- Компоненты бабушки и дедушки и внуки (межуровневые компоненты): публикация подписки на сообщение, реакция-редукция