持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情
背景
在开发react项目时，可能会遇到一些特殊的需求，比如需要使用原生的DOM节点。
例如：让文本框获得焦点，使用一些第三方库（如better-scroll、iScroll等），在React中如何获取DOM节点呢？
除了可以使用getElementById等原生方法外，还可以使用React提供的一个特殊的API-ref。
Ref
string ref
ref可以帮助开发者获取到类组件的实例化对象和原生DOM节点当ref绑定在组件上，渲染完成后可以获取到组件实例。
当ref绑定在标签上，渲染完成后，可以获取到真实的DOM节点，具体代码如下：
这段代码中有两个ref，第一个ref绑定的是p标签，第二个ref绑定的是Child;
想要获取对应的ref，可通过this.refs来进行获取，refs本身是一个对象，绑定的ref都会变成该对象的一个属性；
在使用ref的时候还有一些注意事项。
- ref的命名虽然可以自定义，但也要注意js的命名规范，另外要遵循驼峰命名法。
- 单个组件内，ref不能重名。
- 获取ref时，要在
componentDidMount和componenetDidUpdate中进行，否则ref是还没有赋值或还没有更新。
createRef
在上面代码中使用的是老版本的ref,俗称string ref,在react16.3中对ref的使用做了更新，新增createRef方法。
使用createRef创建ref时，需要先把ref绑定在组件的属性或者变量中，然后和节点做绑定；
获取ref时，需要通过ref的current属性来获取ref中具体存储的内容。
表单
Html中，当用户对表单元素进行操作时，会改变表单的一些内部属性，这些内部属性也就是该表单控件的一种状态。
在react组件中，想要获取表单组件内部状态或者想要控制表单的这些内部状态，可以把组件的状态和表单的状态进行绑定。
当组件的state改变时修改表单状态，或者表单状态被改变时，再通过setState修改组件的状态，这样就形成了组件对表单的控件的控制；
这种操作在React中有一个专门的名称-受控组件，具体写法如下：
- 输入类型表单控件，控制
value的值； - 单选框和复选框则需要控制
checked属性；
编写非受控组件时，无需添加onChange事件，但也要注意value和checked要写成defaultValue和defaultChecked.
