组件与 Props

// 组件 = 函数签名 props → JSX
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 等价于
const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

function Bad({ user }) {
  user.name = 'Hacker';       // 🚨 不要修改 props
  return <div>{user.name}</div>;
}

function Good({ user }) {
  const [name, setName] = useState(user.name);  // ✅ 复制到 state
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

<Tooltip
  content="保存"              // 基本类型
  position={{ x: 10, y: 5 }}  // 对象
  onConfirm={() => save()}    // 函数
  icon={<SaveIcon />}         // JSX / React Element
  roles={['admin', 'editor']} // 数组
/>

// children 是组件标签之间的所有内容
function Card({ children, title }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// 用法
<Card title="用户信息">
  <p>姓名：张三</p>
  <p>邮箱：zhang@example.com</p>
</Card>

// 容器组件：负责数据和逻辑
function UserListContainer() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return <UserList users={users} />;
}

// 展示组件：只负责渲染
function UserList({ users }) {
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

function Layout({ header, sidebar, children }) {
  return (
    <div className="layout">
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

// 使用
<Layout header={<Navbar />} sidebar={<Sidebar />}>
  <Dashboard />
</Layout>

function DataFetcher({ url, render }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData);
  }, [url]);

  if (!data) return <div>Loading...</div>;
  return <>{render(data)}</>;
}

// 使用
<DataFetcher
  url="/api/users"
  render={users => <UserTable users={users} />}
/>

// 注入 loading 状态
function withLoading(WrappedComponent) {
  return function WithLoading({ isLoading, ...props }) {
    if (isLoading) return <Spinner />;
    return <WrappedComponent {...props} />;
  };
}

const UserProfileWithLoading = withLoading(UserProfile);

function UserProfile({ userId }) {
  useEffect(() => {
    // componentDidMount + componentDidUpdate（依赖变化）
    fetchUser(userId);
    
    // componentWillUnmount
    return () => cancelPendingRequest();
  }, [userId]);
}

// React 18+ 推荐：JavaScript 默认参数
function Button({ text = '确认', onClick, size = 'md' }) {
  return <button onClick={onClick} className={`btn-${size}`}>{text}</button>;
}

// 老式写法（不推荐）
Button.defaultProps = {
  text: '确认',
  size: 'md',
};

// 受控组件：状态由父组件管理
<Modal open={isOpen} onClose={() => setIsOpen(false)} />

// 非受控组件：自己管理状态
<Modal defaultOpen={true} />