react基础知识集锦1 --- 函数组件和类组件（部分）

一、react组件中的通讯方式？

一、父子通讯

        父组件通过props将数据传给子组件从而实现父子组件之间的通讯。 下面事例中massage作为props传递给子组件，子组件接收并显示在页面上。父组件可以通过更新自身的状态来改变传递给子组件的数据。

import React from 'react'
import Children from './ChildrenComponent'

class ParentComponent exports React.Component {
    constructor(props){
        super(props)
        this.state = {
            message:'hello'
        }
    }

    render(){
        return {
            <div>
                <Children message={this.state.message} />
            </div>
        }
    }
}

export default ParentComponent

import React from 'react'


class ChildrenComponent exports React.Component {
    render(){
        return (
            <div>
                <p>{this.props.message}</p>
            </div>
        )
    }
}

export default ChildComponent

二、兄弟通讯

        有两种常用方法：

                1. 通过共同的父组件：兄弟组件共享它们的父组件中的  状态  和  回调函数

import React from 'react';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sharedData: ''
    };
  }

  handleDataUpdate = (data) => {
    this.setState({ sharedData: data });
  };

  render() {
    return (
      <div>
        <ChildComponent1 onDataUpdate={this.handleDataUpdate} />
        <ChildComponent2 sharedData={this.state.sharedData} />
      </div>
    );
  }
}

export default ParentComponent;

import React from 'react';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sharedData: ''
    };
  }

  handleDataUpdate = (data) => {
    this.setState({ sharedData: data });
  };

  render() {
    return (
      <div>
        <ChildComponent1 onDataUpdate={this.handleDataUpdate} />
        <ChildComponent2 sharedData={this.state.sharedData} />
      </div>
    );
  }
}

export default ParentComponent;

import React from 'react';

class ChildComponent2 extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.sharedData}</p>
      </div>
    );
  }
}

export default ChildComponent2;

                2. 通过全局状态管理库：如Redux、MobX、React Context API（可以使

通讯更加简介灵活）。如果兄弟组件之间的通信比较复杂或跨多个层级时可以考虑这个。

// store.js
import { createStore } from 'redux';

const initialState = {
  sharedData: ''
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_DATA':
      return {
        ...state,
        sharedData: action.payload
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

// ParentComponent.js
import React from 'react';
import { connect } from 'react-redux';

class ParentComponent extends React.Component {
  handleClick = () => {
    this.props.updateData('Data from Child Component 1');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Update Data</button>
        <ChildComponent2 />
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    updateData: (data) => dispatch({ type: 'UPDATE_DATA', payload: data })
  };
};

export default connect(null, mapDispatchToProps)(ParentComponent);

// ChildComponent2.js
import React from 'react';
import { connect } from 'react-redux';

class ChildComponent2 extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.sharedData}</p>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    sharedData: state.sharedData
  };
};

export default connect(mapStateToProps)(ChildComponent2);

 三、跨组件通讯

        1. 使用props：将数据作为props从一个组件传到另一个组件

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    const data = '这是要传递的数据';

    return (
      <div>
        <ChildComponent data={data} />
      </div>
    );
  }
}

export default ParentComponent;

// 子组件
import React from 'react';

class ChildComponent extends React.Component {
  render() {
    const { data } = this.props;

    return (
      <div>
        <p>{data}</p>
      </div>
    );
  }
}

export default ChildComponent;

        2. 使用上下文（Context)：上下文API允许在组件树中共享数据，避免了层层传递props的繁琐。可以创建一个  上下文提供者  或  一/多个消费者  来实现。

// 父组件作为提供者
import React from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    const data = '这是要传递的数据';

    return (
      <MyContext.Provider value={data}>
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

export default ParentComponent;

// 子组件作为消费者
import React from 'react';
import MyContext from './MyContext';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <MyContext.Consumer>
          {(data) => <p>{data}</p>}
        </MyContext.Consumer>
      </div>
    );
  }
}

export default ChildComponent;

        3. 使用全局状态管理库：比如Redux等。

二、JSX的本质是什么腻？

JSX(javaScript XML) 它是一种语法的拓展，它允许我们在JavaScript代码中编写类似于XML/HTML的结构。

它是react库里常用的一种写法，用于描述组件的结构跟外观（自己感觉就是排版）。

但， 它不是JavaScript的一部分，也不是浏览器原生支持的语法（jsx代码需要通过工具，如babel进行转换，然后才能被浏览器理解执行）。

本质上讲， 她是一个语法糖。它被转译为对应的javascript代码。其中可以使用HTML标签、组件等，也可以插入JavaScript表达式。

通过JSX的使用，我们可以更直观地编写和阅读react组件的结构，提高了开发效率和可维护性

需要注意的是，在使用时要确保在作用于中引入了react对象（import React from 'react'）

三、Context是什么呀？要怎么用？

Context是react库中的一种  机制，用于在组件树中共享数据。（上面第一个问题中有代码示例哦！）

使用：

1. 创建Context对象：通过调用 React.createContext() 可以创建一个 Context 对象。这个对象包含了两个组件：Provider 和 Consumer。Provider 负责提供要共享的数据，而 Consumer 则用于接收和使用这些数据。

2. 提供者（Provider）：父组件作为提供者，将数据传递给Provider的value属性来共享数据。Provider组件的所有后代组件都可以访问共享的数据。

3. 消费者（Consumer）：后代组件可以通过 Consumer 组件来订阅共享的数据，并在其函数子组件中接收这些数据。

注意：使用 Context 需要谨慎。过度使用 Context 可能导致组件之间的耦合性增加，降低了组件的可复用性和可维护性。因此，应该根据实际情况慎重选择是否使用 Context。