react面试题
重要知识点： Vue.js / React 项目中图片放置路径？
方法1：public目录下，不会被Webpack处理，而是直接发布到最终的Web服务器根目录下，客户端可以通过地址直接访问到该图片！ —— 项目中的“动态图片”（例如头像、评论照片、商品图）只能放在public目录下
方法2：src目录下，默认不会被Webpack处理——除非被其它模块文件导入，就会被打包编译到最终发布的成品中；否则最终的成品中就不会出现该图片！—— 项目中的“静态图片”（例如logo、精灵图）可以放到src目录下，在Webpack打包时就可以导入了
面试题：React中的“受控组件”和“非受控组件”
提示：React中没有指令的概念，也就没有v-model双向数据绑定绑定指令；
React中压根没有“双向数据绑定”的概念 —— 使用两个“单向数据绑定”模拟实现了。
方向1：Model => View，状态变量的值绑定到输入元素的value属性：
<input value={age}/>
方向2：View => Model，输入元素最新的输入可以反向影响状态变量：
<input onChange={e=>setAge(e.target.value)}/>
React要求输入元素的“数据源只能是单一的”：要么是用户的输入，要么是绑定的状态变量 —— 所以如果给输入元素绑定了 value={状态变量} ，那么不能再直接输入数据了 —— 此时的输入元素称为“受控组件”；此时必需提供onChange事件，才能真正获得用户输入。
“受控组件”可以监视“用户的每一次输入”，对输入的每个按键都进行检验；有些情况下无需要如此紧盯的检验，有时只需要在“点击提交按钮”时进行一次简单的校验即可，这种情况下可以使用“非受控组件”：
| 受控组件 | 非受控组件 | |
| 语法 | let [age, setAge] = useState(0) <input value={age} onChange={e=>setAge(e.target.value)}/> | let ageInput = useRef( ) <input defaultValue="" ref={ageInput}/> clg(ageInput.current.value) |
| 应用场合 | 校验用户的每次输入 | 不需要监控每次输入，只需要最后读取一次 |