浏览器端写代码

当React在浏览器端运行时，有一些特殊的操作需要处理，例如，需要用户填入表单一些信息，我们会用到React的一些不同的技能，实现无约束的组建让字段记住内部的状态或者使用约束的组建完全控制字段的状态，

在这节里，会了解事件是如何工作的，如何做到使用一些手段的库跨浏览器的相容接口，我们也会了解到React团队实现事件系用的高效的解决方案，

在事件讲完后，会了解到涉及组建的基础的DOM节点，虽然这些组建的DOM节点的操作非常强大，但是应该谨慎使用，因为它打破了一些React习惯用法，

在基础的DOM节点讲完后，会了解到关于React动画的插件，例如react-motion,最后,会看到动画与SVGs结合使用是多么容易，创建动态的可配置的ICON图标，

在这章里，我们会完成

－不同的技巧创建React表单

－如何监听DOM事件以及执行自定义事件

－使用refs执行命令操作DOM节点的方式

－如何创建简单的动画跨浏览器

－React创建SVGs

---

表单

只要是真实的项目就会需要与用户交互，如果需要用户输入一些信息，表单是通用的解决方案，处理输入字段和其他表单元素对于react是非常重要的，

无约束的组建

内部管理自己的状态，多个输入域处理，很多重复的绑定事件的代码

使用一个事件处理，添加随机的数字域而不是创建监听，

handleChange({ target }) {

   console.log(target.name);

   this.setState({

   [target.name]:target.value,

   })

}

约束的组建

填充表单的值，用服务端的数据或者是用父组建的数据，什么是约束的组建，头脑发懵，其实是这样的，完全掌控输入域的值我们就叫它约束的组建

const Controlled = () => (

    <form>

        <input type="text" value="Hello React" />

       <button>Submit</button>

  </form>

)

const Controlled = () => (

<form>

    <input type="text" defaultValue="Hello React" />

    <button>Submit</button>

</form>

)

JSON Schema

为了保持清爽的代码和不需要写重复的代码，自动创建表单的一个流行的方案是react-jsonschema-form,由mozilla-services维护

事件

鉴于事件的工作机制对于不同的浏览器来说有轻微的不同，React抽象出事件的工作机制以便开发者以统一的接口处理，而不用考虑浏览器的差异，为了做到这样，先需要了解合成事件，合成事件是指它封装了浏览器原生事件对象，并对浏览器做了兼容。他和浏览器原生事件对象有相同的接口，包括stopPropagation()和preventDefault()。如果出于某些原因想使用浏览器原生事件，可以使用nativeEvent属性获取,

两个有趣的东西关于React的合成事件，一个是被重用，单个作用域处理（事件回调函数被执行后所有的属性将被销毁），当一个事件响应函数执行过后，事件的属性被设置为 null， 如果想用保持事件的值的话，调用event.persist()，

另一个是关于React的性能和React添加事件到DOM节点的处理的细节，

Refs

用命令式操作基本的DOM节点，

<form>

<input type="text"   ref={element => (this.element = element)} />

<button onClick={this.handleClick}>Focus</button>

</form>

动画

动画插件（react-motion）

SVG

它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形，过去常用icon font创建图标，出现很多问题，第一个是很难理解，很难用CSS定位，兼容性不好，而使用SVG，容易使用CSS和JS修改，无状态的函数声明