组件通信

// 父组件
function Parent() {
  const user = { name: '张三', age: 25 };
  
  return <Child user={user} />;
}

// 子组件
function Child({ user }) {
  return <div>{user.name} - {user.age}岁</div>;
}

// 父组件
function Parent() {
  const [message, setMessage] = useState('');

  const handleMessage = (msg) => {
    setMessage(msg);
  };

  return (
    <div>
      <p>收到消息: {message}</p>
      <Child onSend={handleMessage} />
    </div>
  );
}

// 子组件
function Child({ onSend }) {
  const [input, setInput] = useState('');

  const handleClick = () => {
    onSend(input);
    setInput('');
  };

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={handleClick}>发送</button>
    </div>
  );
}

// 通过共同父组件
function Parent() {
  const [data, setData] = useState('');

  return (
    <div>
      <ChildA onUpdate={setData} />
      <ChildB data={data} />
    </div>
  );
}

function ChildA({ onUpdate }) {
  return (
    <button onClick={() => onUpdate('来自 A 的数据')}>
      发送数据
    </button>
  );
}

function ChildB({ data }) {
  return <div>收到: {data}</div>;
}

import { createContext, useContext, useState } from 'react';

// 创建 Context
const UserContext = createContext();

// 顶层组件
function App() {
  const [user, setUser] = useState({ name: '张三' });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Parent />
    </UserContext.Provider>
  );
}

// 中间组件（不需要传递 props）
function Parent() {
  return <Child />;
}

// 深层组件直接使用
function Child() {
  const { user, setUser } = useContext(UserContext);

  return (
    <div>
      <p>用户: {user.name}</p>
      <button onClick={() => setUser({ name: '李四' })}>
        切换用户
      </button>
    </div>
  );
}

// 多个组件共享状态时，提升到最近的共同父组件
function TemperatureConverter() {
  const [celsius, setCelsius] = useState(0);

  const fahrenheit = (celsius * 9/5) + 32;

  return (
    <div>
      <CelsiusInput value={celsius} onChange={setCelsius} />
      <FahrenheitInput value={fahrenheit} onChange={(f) => setCelsius((f - 32) * 5/9)} />
    </div>
  );
}

function CelsiusInput({ value, onChange }) {
  return (
    <div>
      <label>摄氏度:</label>
      <input 
        type="number" 
        value={value} 
        onChange={e => onChange(Number(e.target.value))} 
      />
    </div>
  );
}

function FahrenheitInput({ value, onChange }) {
  return (
    <div>
      <label>华氏度:</label>
      <input 
        type="number" 
        value={value.toFixed(1)} 
        onChange={e => onChange(Number(e.target.value))} 
      />
    </div>
  );
}

// events.js
class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }

  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

export const eventBus = new EventEmitter();

// 组件 A
function ComponentA() {
  const handleClick = () => {
    eventBus.emit('message', 'Hello from A');
  };

  return <button onClick={handleClick}>发送消息</button>;
}

// 组件 B
function ComponentB() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const handler = (data) => setMessage(data);
    eventBus.on('message', handler);

    return () => eventBus.off('message', handler);
  }, []);

  return <div>收到: {message}</div>;
}