const UserDashboard = () => {  
  // fetching user data  拿用户数据
  // fetching analytics  拿【`/ˌænəˈlɪtɪks/` 分析数据；统计数据】
  // handling form state 处理表单的状态
  // calculating totals  
  // managing modals     管理模态框
  // formatting dates    格式化日期
  // 400 lines later...  
}

// ❌ This component does everything  
// Fetches data, handles state,  
// formats display, manages UI logic  
  
const UserProfile = () => {  
  const [user, setUser] = useState(null)  
  const [posts, setPosts] = useState([])  
  const [loading, setLoading] = useState(true)  
  const [isFollowing, setIsFollowing] = useState(false)  
  
  useEffect(() => {  
    fetch('/api/user')  
      .then(res => res.json())  
      .then(data => {  
        setUser(data)  
        setLoading(false)  
      })  
  }, [])  
  
  useEffect(() => {  
    fetch('/api/posts')  
      .then(res => res.json())  
      .then(data => setPosts(data))  
  }, [])  
  
  const handleFollow = () => {  
    setIsFollowing(!isFollowing)  
    fetch('/api/follow', { method: 'POST' })  
  }  
  
  if (loading) return <div>Loading...</div>  
  
  return (  
    <div>  
      <img src={user.avatar} alt={user.name} />  
      <h1>{user.name}</h1>  
      <p>{user.bio}</p>  
      <button onClick={handleFollow}>  
        {isFollowing ? 'Unfollow' : 'Follow'}  
      </button>  
      <div>  
        {posts.map(post => (  
          <div key={post.id}>  
            <h3>{post.title}</h3>  
            <p>{post.body}</p>  
          </div>  
        ))}  
      </div>  
    </div>  
  )  
}

// ✅ Custom hook — handles data fetching only  
const useUserProfile = () => {  
  //初始化数据的函数组件
  return { user, loading }  
}  
  
// ✅ Component — displays user info only  
const UserInfo = ({ user }) => {  
  // ...初始化数据的组件
  return (  
	{/*...*/}
  )  
}  
  
// ✅ Component — handles follow action only  
const FollowButton = ({ userId }) => {  
	//...处理点击时间，上报关注布尔值的函数
  return ( 
  {/*渲染关注按钮*/}
    <button onClick={handleFollow}>  
      {isFollowing ? 'Unfollow' : 'Follow'}  
    </button>  
  )  
}  
  
// ✅ Component — renders post list only  
const UserPosts = ({ posts }) => {  
	{/*渲染文章*/}
  return (  
    <div>  
      {posts.map(post => (  
        <div key={post.id}>  
          <h3>{post.title}</h3>  
          <p>{post.body}</p>  
        </div>  
      ))}  
    </div>  
  )  
}  
  
// ✅ Parent — only coordinates  
// Does NO work itself — just assembles  
//【`/koʊˈɔːrdɪneɪts/` 协调；`/əˈsembəlz/` 组装】
【译文】父组件只负责协调和组装，不亲自承担具体业务逻辑。
const UserProfile = () => {  
  const { user, loading } = useUserProfile()  
  
  if (loading) return <div>Loading...</div>  
  
  return (  
    <div>  
      <UserInfo user={user} />  
      <FollowButton userId={user.id} />  
      <UserPosts posts={user.posts} />  
    </div>  
  )  
}

// ❌ Every new button type forces you 你为了让一个按钮有不同样式，新建了n个实例去编辑不同的样式 
// to edit this component  
// Risk of breaking existing button styles  
  
const Button = ({ type, label }) => {  
  if (type === 'primary') {  
    return (  
      <button style={{ background: 'blue', color: 'white' }}>  
        {label}  
      </button>  
    )  
  }  
  if (type === 'danger') {  
    return (  
      <button style={{ background: 'red', color: 'white' }}>  
        {label}  
      </button>  
    )  
  }  
  // Adding "success" type? Edit this file again. 新增按钮需要继续编辑文件。 
  // Every edit risks breaking primary and danger.  
}

// ✅ Base component is closed for modification 
// 基准组件（公用逻辑，按钮的架子）禁止修改，通过props来获得不同的实例 
// Extend it by passing what changes as props  
// 通过传递props值 来【`/ɪkˈstend/` 扩展】
  
const Button = ({ label, style, onClick, ...rest }) => {  
  return (  
    <button  
      onClick={onClick}  
      style={style}  
      {...rest}     // accepts any HTML button attribute  
    >  
      {label}  
    </button>  
  )  
}  
  
// ✅ Each variant is its own extension  每个【`/ˈveriənt/` 变体；整句是“每个变体都是一种独立扩展”】
// Zero modification to Button ever needed  
  
const PrimaryButton = ({ label, onClick }) => (  
  <Button  
    label={label}  
    onClick={onClick}  
    style={{ background: 'blue', color: 'white' }}  
  />  
)  
  
const DangerButton = ({ label, onClick }) => (  
  <Button  
    label={label}  
    onClick={onClick}  
    style={{ background: 'red', color: 'white' }}  
  />  
)  
  
// Adding success button?  
// New component. Zero changes to existing code. 不修改已有代码，增量更新 
const SuccessButton = ({ label, onClick }) => (  
  <Button  
    label={label}  
    onClick={onClick}  
    style={{ background: 'green', color: 'white' }}  
  />  
)

// ❌ These two inputs behave differently 这两个输入会得到不同的效果 
// Swapping one for the other breaks your form  【`/swæp/` 替换】
  
// 箭头函数的简写，相当于省略了【{ return】（。。。
const TextInput = ({ value, onChange }) => (  // 这里是参数解构
  <input  
    type="text"  
    value={value}  
    onChange={onChange}  
    // onChange gives: event object  
  />  
)  
  
const CustomInput = ({ value, onValueChange }) => (  
  <input  
    type="text"  
    value={value}  
    onChange={(e) => onValueChange(e.target.value)}  
    // Different prop name + gives string not event 
    // Swapping breaks the parent component  
  />  
)

// ✅ Both components have identical contracts  
// Same props. Same behavior. Freely swappable.  
// 同样的props，同样的行为，【`/ˈswɑːpəbəl/` 可替换的】
  
const TextInput = ({ value, onChange, placeholder }) => (  
  <input  
    type="text"  
    value={value}  
    onChange={onChange}  
    placeholder={placeholder}  
  />  
)  
  
const TextareaInput = ({ value, onChange, placeholder }) => (  
  <textarea  
    value={value}  
    onChange={onChange}  
    placeholder={placeholder}  
  />  
)  
  
// Parent does not care which one renders  
// Swap freely — nothing breaks  
const CommentForm = ({ useTextarea = false }) => {  
  const [value, setValue] = useState('')  
  
  const InputComponent = useTextarea ? TextareaInput : TextInput  
  
  return (  
    <form>  
      <InputComponent  
        value={value}  
        onChange={(e) => setValue(e.target.value)}  
        placeholder="Write a comment..."  
      />  
    </form>  
  )  
}

// ❌ One massive component that handles everything  
// Callers pass null for things they don't need  
  
// 数组解构按顺序，对象解构按名字优先
const NotificationBanner = ({  
  type,  
  email,  
  phone,  
  deviceToken,  
  message,  
  avatarUrl,  
  actionLabel,  
  onAction  
}) => {  
  if (type === 'simple') {  
    // Only uses message  
    // email, phone, deviceToken, avatarUrl all ignored  
    return <div>{message}</div>  
  }  
  
  if (type === 'email') {  
    // Only uses email and message  
    // phone, deviceToken ignored  
    return <div>Email to {email}: {message}</div>  
  }  
}  
  
// Caller forced to pass nulls everywhere 
// 【`/ˈkɔːlər/` 调用方；这里不是“自动设为 null”，而是调用方被迫手动传 null】 
<NotificationBanner  
  type="simple"  
  email={null}       // not needed  
  phone={null}       // not needed  
  deviceToken={null} // not needed  
  message="Done!"  
  avatarUrl={null}   // not needed  
  actionLabel={null} // not needed  
  onAction={null}    // not needed  
/>

// ✅ Specific components for specific needs
// 颗粒度吧反正就是，精细化组件  
// Each caller only knows what it needs  
  
// Only needs message  
const SimpleNotification = ({ message }) => (  
  <div className="notification">  
    {message}  
  </div>  
)  
  
// Only needs email + message  
const EmailNotification = ({ email, message }) => (  
  <div className="notification">  
    Sending to {email}: {message}  
  </div>  
)  
  
// Only needs phone + message  
const SMSNotification = ({ phone, message }) => (  
  <div className="notification">  
    SMS to {phone}: {message}  
  </div>  
)  
  
// Only needs action props  
const ActionNotification = ({ message, actionLabel, onAction }) => (  
  <div className="notification">  
    <p>{message}</p>  
    <button onClick={onAction}>{actionLabel}</button>  
  </div>  
)  
  
// Clean callers — no nulls, no dead props  
<SimpleNotification message="Done!" />  
<EmailNotification email="user@mail.com" message="Welcome!" />  
<ActionNotification  
  message="File ready"  
  actionLabel="Download"  
  onAction={handleDownload}  
/>

// ❌ Component is hardwired to fetch from one place  
// Cannot reuse with different data sources  
// Cannot test without hitting real API  
  
const UserList = () => {  
  const [users, setUsers] = useState([])  
  
  useEffect(() => {  
    // Hardwired — cannot swap this out 
    // 硬编码 - 【`/ˌhɑːrdˈwaɪərd/` 写死了，不能灵活替换】 
    fetch('https://api.myapp.com/users')  
      .then(res => res.json())  
      .then(data => setUsers(data))  
  }, [])  
  
  return (  
    <ul>  
      {users.map(user => (  
        <li key={user.id}>{user.name}</li>  
      ))}  
    </ul>  
  )  
}

// ✅ Component does not care where data comes from
// 组件不关心数据从哪里来
// The fetch function is injected from outside
// fetch 函数由外部【`/ɪnˈdʒekt/` 注入】
 
const UserList = ({ fetchUsers }) => {
  const [users, setUsers] = useState([])
 
  useEffect(() => {
    // Uses whatever function the parent provides
    // 不管父组件给了什么函数，组件只负责调用并消费结果
    fetchUsers().then((data) => setUsers(data))
  }, [fetchUsers])
 
  return (
    <ul>
    {/*map渲染数据*/}
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}
 
// Real usage — production API
// 在线上环境传入真实接口
const fetchFromAPI = () =>
  fetch('https://api.myapp.com/users').then((res) => res.json())
 
<UserList fetchUsers={fetchFromAPI} />
 
// Mock usage — testing
// Promise.resolve 会立刻返回一个成功态 Promise
const fetchMockUsers = () =>
  Promise.resolve([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
  ])
 
<UserList fetchUsers={fetchMockUsers} />
 
// Different source — no rewrite needed
const fetchFromCache = () =>
  Promise.resolve(JSON.parse(localStorage.getItem('users') ?? '[]'))
 
<UserList fetchUsers={fetchFromCache} />

// ✅ Even cleaner — inject the entire hook
 
// Production hook
const useAPIUsers = () => {
  const [users, setUsers] = useState([])
 
  useEffect(() => {
    fetch('/api/users')
      .then((res) => res.json())
      .then(setUsers)
  }, [])
 
  return users
}
 
// Mock hook for testing
const useMockUsers = () => [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
]
 
// Component accepts the hook — does not hardwire it
const UserList = ({ useUsers }) => {
  const users = useUsers()
 
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}
 
// Swap freely — zero changes to UserList
<UserList useUsers={useAPIUsers} />
<UserList useUsers={useMockUsers} />