标准答案
- props 是组件的外部输入，由父组件传入，子组件不应该直接修改 props。
- state 是组件内部拥有的可变状态，适合保存输入值、展开收起、选中项、loading、error 等本组件负责的数据。
- context 适合跨层级共享主题、语言、当前用户、权限、配置等环境信息，避免层层透传 props。
- 局部状态优先放在离使用它最近的组件里，多个兄弟组件共享时再提升到共同父组件或状态管理层。
- context 值变化会影响消费它的组件，频繁变化的大对象不适合直接塞进一个大 context。
题目解析
这道题考的是状态所有权。谁拥有数据，谁负责修改；谁只是展示数据，谁通过 props 接收。
context 解决的是跨层级传递，不自动解决状态更新、缓存、请求和性能问题。
复杂项目里可以按“局部 UI 状态、页面查询状态、服务端缓存、全局环境状态”拆分，而不是把所有东西都放进 context 或全局 store。
代码示例
下面的例子中，theme 来自 context，inputValue 是组件自己的局部 state，label 是外部 props。
TSX
function SearchBox({ label }: { label: string }) {
const theme = useContext(ThemeContext)
const [inputValue, setInputValue] = useState('')
return (
<label data-theme={theme}>
{label}
<input
value={inputValue}
onChange={event => setInputValue(event.target.value)}
/>
</label>
)
}常见误区
- 把所有状态都放进 context，导致任何小变化都可能影响大量组件。
- 在子组件里直接修改 props，而不是通过回调通知父组件更新。
- 局部 UI 状态过早提升到全局，增加数据流复杂度。