리액트 커뮤니케이션 방법은 무엇입니까?-프런트엔드 Q&A-php.cn

리액트 커뮤니케이션 방법은 무엇입니까?

青灯夜游

풀어 주다： 2022-03-22 14:33:19

원래의

5456명이 탐색했습니다.

React 통신 방법은 다음과 같습니다. 1. props를 사용하여 상위 구성 요소와 하위 구성 요소 간에 통신합니다. 2. 콜백 함수를 사용하여 하위 구성 요소와 상위 구성 요소 간에 통신합니다. 3. 형제 구성 요소 간에 통신하려면 Context를 사용합니다. 5. 노드 사용 이벤트 모듈은 싱글톤 통신을 수행합니다. 6. redux를 사용하여 데이터 통신을 공유합니다.

리액트 커뮤니케이션 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React의 6가지 통신 방법

1. Props 부모-자식 통신
2. 콜백 함수, 자식-부모 통신
3. 변수 승격, 형제 컴포넌트 통신
4.컨텍스트, 크로스 컴포넌트 통신
5. node 이벤트 모듈의 단일 인스턴스 통신
6. redux 공유 데이터 통신

1.props 부모-자식 통신

function Children(props) {
      return (
        <div>
          <p>Children</p>
          <p>{props.text}</p>
        </div>
      )
    }
    function Parent() {
      return (
        <div>
          <p>Parent</p>
          <Children text="这是爸爸传给你的东西"></Children>
        </div>
      )
    }
    
    export default Parent

로그인 후 복사

2.콜백 기능, 자식-부모 통신

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.handleChange(&#39;改变了&#39;) }}>
        点击我改变爸爸传给我的东西
      </button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  function handleChange(val) {
    setText(val)
  }
  return (
    <div>
      <p>Parent</p>
      <Children handleChange={handleChange} text={text}></Children>
    </div>
  )
}
export default Parent

로그인 후 복사

3 .변수 프로모션, 형제 설립 통신

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <button onClick={() => { props.setText(&#39;我是Children发的信息&#39;) }}>给Children1发信息</button>
    </div>
  )
}
function Children1(props) {
  return (
    <div>
      <p>Children1</p>
      <p>{props.text}</p>
    </div>
  )
}

function App() {
  let [text, setText] = useState(&#39;&#39;)
  return (
    <>
      <div>APP</div>
      <Children setText={setText}></Children>
      <Children1 text={text}></Children1>
    </>
  )
}
export default App

로그인 후 복사

4.컨텍스트, 조직 간 통신

옛 쓰기 방식

class Children extends React.Component {
  static contextTypes = {
    text: PropsType.string
  }
  render() {
    return (
      <div>
        <p>Children</p>
        <p>{this.context.text}</p>
      </div>
    )
  }
}

class Parent extends React.Component {
  static childContextTypes = {
    text: PropsType.string
  }
  getChildContext() {
    return {
      text: &#39;我是爸爸的信息&#39;
    }
  }
  render() {
    return (
        <div>
          <p>Parent</p>
          <Children></Children>
        </div>
    )
  }
}
export default Parent

로그인 후 복사

새로운 쓰기 방식

const { Consumer, Provider } = React.createContext()

class Children extends React.Component {
  render() {
    return (
      <Consumer>
        {
          (value) => (
            <div>
              <p>Children1</p>
              <p>{value.text}</p>
            </div>
          )
        }
      </Consumer>
    )
  }
}

class Parent extends React.Component {
  render() {
    return (
      <Provider value={{ text: &#39;我是context&#39; }}>
        <div>
          <p>Parent</p>
          <Children1></Children1>
        </div>
      </Provider>
    )
  }
}

export default Parent

로그인 후 복사

5.노드의 싱글톤 이벤트 통신 모듈

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.event.emit(&#39;foo&#39;) }}>点击我改变爸爸传给我的东西</button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  let event = new Events()
  event.on(&#39;foo&#39;, () => { setText(&#39;改变了&#39;) })
  return (
    <div>
      <p>Parent</p>
      <Children event={event} text={text}></Children>
    </div>
  )
}
export default Parent

로그인 후 복사

Note⚠️: 이러한 종류의 통신을 위해서는 상단에 events 모듈을 소개하는 것을 잊지 마세요. 설치할 필요가 없습니다. node 자체 모듈입니다.

6.redux 공유 데이터 통신

store.js

import { createStore } from &#39;redux&#39;

let defaultState = {
    text: &#39;我是store&#39;
}

let reducer = (state = defaultState, action) => {
    switch (action) {
        default: return state
    }
}

export default createStore(reducer)

로그인 후 복사

child.js

import React from &#39;react&#39;

import { connect } from &#39;react-redux&#39;

class Child extends React.Component {
    render() {
        return (
            <div>Child<p>{this.props.text}</p></div>
        )
    }
}

let mapStataToProps = (state) => {
    return {
        text: state.text
    }
}

export default connect(mapStataToProps, null)(Child)

로그인 후 복사

Parent.js

class Parent extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <p>Parent</p>
          <Child></Child>
        </div>
      </Provider>
    )
  }
}

export default Parent

로그인 후 복사

참고: redux 및 react-redux를 설치하는 것을 잊지 마세요.

【관련 추천: Redis 비디오 튜토리얼】

위 내용은 리액트 커뮤니케이션 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!