component间通信

component间通信 basicconcepts

in Reactapplicationin, component间通信 is 构建 complex application core. 不同component之间需要共享data, 传递information, 以implementation协同工作. Reactproviding了 many 种component间通信 方式, 每种方式都 has 其适用场景.

1. 父子component通信

父子component通信 is Reactin最common 通信方式, throughprops将data from 父component传递 to 子component.

// 父component
function ParentComponent() {
  const [message, setMessage] = useState('Hello from Parent');
  
  return (
    <div>
      <ChildComponent message={message} />
    </div>
  );
}

// 子component
function ChildComponent(props) {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
}

2. 子父component通信

子父component通信throughcallbackfunctionimplementation, 父component将callbackfunctionserving asprops传递给子component, 子component调用该function向父component传递data.

// 父component
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  const handleIncrement = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
}

// 子component
function ChildComponent(props) {
  return (
    <button onClick={props.onIncrement}>
      Increment
    </button>
  );
}

3. 兄弟component通信

兄弟component之间 通信通常需要through共同 父componentserving asin间桥梁.

// 父component
function ParentComponent() {
  const [data, setData] = useState('');
  
  const handleDataChange = (newData) => {
    setData(newData);
  };
  
  return (
    <div>
      <SiblingA onDataChange={handleDataChange} />
      <SiblingB data={data} />
    </div>
  );
}

// 兄弟componentA
function SiblingA(props) {
  const handleInputChange = (e) => {
    props.onDataChange(e.target.value);
  };
  
  return (
    <input type="text" onChange={handleInputChange} />
  );
}

// 兄弟componentB
function SiblingB(props) {
  return (
    <p>Received data: {props.data}</p>
  );
}

advancedcomponent通信方式

for 于 complex application, Reactproviding了更advanced 通信方式, such asContext API, Reduxetc..

1. Context API

Context API允许 in componenttreein共享data, 而无需throughprops逐层传递.

// creationContext
const ThemeContext = React.createContext('light');

// 父component - providingContext
function ParentComponent() {
  return (
    <ThemeContext.Provider value="dark">
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

// 子component - consumeContext
function ChildComponent() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <div style={{ backgroundColor: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#333' }}>
          Current theme: {theme}
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

2. usinguseContext Hook

in functioncomponentin, 可以usinguseContext Hook更简洁地consumeContext.

// 子component - usinguseContext Hook
function ChildComponent() {
  const theme = useContext(ThemeContext);
  
  return (
    <div style={{ backgroundColor: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#333' }}>
      Current theme: {theme}
    </div>
  );
}

component间通信 best practices

• 优先usingprops and callbackfunctionfor simple 父子component通信
• for 于深层嵌套 component, usingContext API or statusmanagementlibrary
• 避免过度using全局status, 只 in 必要时using
• 保持component 职责单一, 避免component间过度耦合