const UserInfoForm = () => {
  const [isEditing, setIsEditing] = useState(false);
  return (
    <div className = 'form-container'>
      <button onClick={()=>setIsEditing(!isEditing)}>
        {isEditing ? '取消' : '编辑'}
      </button>
      {
        isEditing ? (
          <input
            type='text'
            palceholder='请输入姓名'
            className = 'edit-input'
            />
        ) : (
          <input
            type='text'
            placeholder='请输入姓名'
            disabled
            className='view-input'
            />
        )
      }
    </div>
  )
  
}

{
  isEditing ? (
    <input type="text" placeholder="输入姓名" className="edit-input" />
  ) : (
    <div className="view-only-display">此处显示姓名</div>
  );
}

const Component = () => {
  return (
    <div>
      <h1>你好</h1>
      <p>世界</p>
    <div/>
  )
}

{
  type: 'div',
  props: {
    children: [
      {
        type: 'h1',
        props: {
          children: '你好'
        }
      },
      {
        type: 'p',
        props: {
          children: '世界'
        }
      }
    ]
  }
}

{
  type: Input, //直接引用Input组件函数
  props: {
    id: 'company-tax-id',
    placeholder: '输入公司税号'
  }
}

// 初次渲染
<div>
  <Counter />
</div>

// 二次渲染
<div>
  <Counter />
</div>

// showDetails 为 true: 渲染 UserProfile， showDetails 为 false: 改为渲染 LoginPrompt  
<>  
  {showDetails ? <UserProfile userId={123} /> : <LoginPrompt />}  
</>

// 切换前  
<>  
  {isPrimary ? (  
    <UserProfile userId={123} role="primary" />  
  ) : (  
    <UserProfile userId={456} role="secondary" />  
  )}  
</>

const TabContent = ({ activeTab, tabs }) => {
  return (
    <div className="tab-container">
      {tabs.map((tab) => (
        // key 会覆盖基于位置的比较逻辑
        <div key={tab.id} className="tab-content">
          {activeTab === tab.id ? (
            <UserProfile
              key="active-profile"
              userId={tab.userId}
              role={tab.role}
            />
          ) : (
            <div key="placeholder" className="placeholder">
              选中此标签页查看 {tab.userId} 的个人资料
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

<ul>  
  {items.map((item) => (  
    <li key={item.id}>{item.text}</li>  
  ))}  
</ul>

// 不需要键  
<>  
  <Input />  
  <Input />  
</>

const Component = () => {  
  const [isReverse, setIsReverse] = useState(false);  

  return (  
    <>  
      <Input key={isReverse ? "unique-key" : null} />  
      <Input key={!isReverse ? "unique-key" : null} />  
    </>  
  );  
};

<>
  {items.map((item) => (
    <ListItem key={item.id} />
  ))}
  <StaticElement /> {/* 如果items变化，这个静态组件会重新挂载吗？ */}
</>

[
  // 整个动态数组被视为一个子元素
  [
    { type: ListItem, key: "1" },
    { type: ListItem, key: "2" },
  ],
  { type: StaticElement }, // 始终保持在第二位
]

// 状态提升方案：通过父组件集中管理状态。这是React设计哲学中状态控制权的取舍问题——当子组件关系复杂时，应该让更高层级的组件掌握关键状态。
const TabContent = ({ activeTab }) => {
  // 标签页共享的状态
  const [sharedState, setSharedState] = useState({ /* 初始状态 */ });

  return (
    <div>
      {activeTab === "profile" && (
        <ProfileTab state={sharedState} onStateChange={setSharedState} />
      )}
      {activeTab === "settings" && (
        <SettingsTab state={sharedState} onStateChange={setSharedState} />
      )}
    </div>
  );
};

// 通过 key 重置非受控组件的 DOM 实例
const UserForm = ({ userId }) => {
  return (
    <form>
      <input
        key={userId}          // key 变化触发 DOM 重建
        name="username"
        defaultValue=""       // 非受控输入特性
      />
    </form>
  );
};

// 性能较差 —— 每次筛选条件变化时整个应用重新渲染
const App = () => {
  const [filterText, setFilterText] = useState("");
  const filteredUsers = users.filter((user) => user.name.includes(filterText));

  return (
    <>
      <SearchBox filterText={filterText} onChange={setFilterText} />
      <UserList users={filteredUsers} />
      <ExpensiveComponent />
    </>
  );
};

const UserSection = () => {
  const [filterText, setFilterText] = useState("");
  const filteredUsers = users.filter((user) => user.name.includes(filterText));

  return (
    <>
      <SearchBox filterText={filterText} onChange={setFilterText} />
      <UserList users={filteredUsers} />
    </>
  );
};

const App = () => {
  return (
    <>
      <UserSection />
      <ExpensiveComponent />
    </>
  );
};

const ProductPage = ({ productId }) => {  
  const [selectedSize, setSelectedSize] = useState("medium");  
  const [quantity, setQuantity] = useState(1);  
  const [shipping, setShipping] = useState("express");  
  const [reviews, setReviews] = useState([]);  

  useEffect(() => {  
    fetchProductDetails(productId);  
    fetchReviews(productId).then(setReviews);  
  }, [productId]);  

  return (  
    <div>  
      <ProductInfo  
        selectedSize={selectedSize}  
        onSizeChange={setSelectedSize}  
        quantity={quantity}  
        onQuantityChange={setQuantity}  
      />  
      <ShippingOptions shipping={shipping} onShippingChange={setShipping} />  
      <Reviews reviews={reviews} />  
    </div>  
  );  
};

const ProductPage = ({ productId }) => {  
  return (  
    <div>  
      <ProductConfig productId={productId} />  
      <ReviewsSection productId={productId} />  
    </div>  
  );  
};  

// 独立商品配置逻辑
const ProductConfig = ({ productId }) => {  
  const [selectedSize, setSelectedSize] = useState("medium");  
  const [quantity, setQuantity] = useState(1);  
  const [shipping, setShipping] = useState("express");  

  return (  
    <>  
      <ProductInfo  
        selectedSize={selectedSize}  
        onSizeChange={setSelectedSize}  
        quantity={quantity}  
        onQuantityChange={setQuantity}  
      />  
      <ShippingOptions shipping={shipping} onShippingChange={setShipping} />  
    </>  
  );  
};  

// 独立评价逻辑
const ReviewsSection = ({ productId }) => {  
  const [reviews, setReviews] = useState([]);  

  useEffect(() => {  
    fetchReviews(productId).then(setReviews);  
  }, [productId]);  

  return <Reviews reviews={reviews} />;  
};