React best Practice 03

[dlrandy]

React 是单向数据流，是从react组件树的顶端流向底部的、

props是不能被修改的（你懂得）

父组件向子组件通信（props）。 子组件向父组件通信（callback） 相邻组件通信（common parent）

React的一个最佳实践就是： 把组件尽可能的拆分成具有某一个特定行为的多个小组件，特别是展示的那部分。

通常在写React的时候，一般是要组件 意识不到数据源的，这样就可以在App的其它地方使用不同的数据源来复用 组件。

获取数据 的时候一般都是在componentWillMount或者componentDidMount的时候，后者只适用于浏览器渲染。首先可能会觉得will的那种会快一些，但是server渲染得时候 ，fire 一个async的api会产生意外的结果。

一般就是单独封装数据的组件方法就好了吧

这个获取数据的逻辑也是可以拿出组件的： 一种是使用HoCs：const withData = url => Component => EnhancedComponent; 这个URl可静可动，const endpoint = typeof url === 'function' ? url(this.props) : url; 还有一种就是使用react-refetch, 它还能带来额外的特性。 ,

[dlrandy]

http://reactpatterns.com/#state-hoisting
Uncontrolled comopnent是元素自己用shijian管理自己的状态的，事件触发把值存到状态里 ，这时候的最好就是每一个元素都有相同的事件处理器，然后内部分开条件设置state。 controlled component是由react的state负责初始化以及管理元素状态的，由react的state进行初始化并管理value属性，事件和uncontrolled一样。

[dlrandy]

JSON Schema是用来自动生成表单的 。

表单一般都是模板代码所以复杂的表单最好借助自动生成表单的工具。

react-jsonschema-form (后台管理系统) 手动配置一个对象无需使用html

React引入了Synthetic Event的概念，它是一个封装了浏览器原生事件对象的包装对象，不论哪个浏览器，他都有相同的属性。 on+ EventName是处理句柄。 一种约定就是使用handle+EventName作为事件的处理句柄。

访问原生对象的话，可以用其nativeEvent。

撸码的标准就是尽可能少的写模板代码，避免重复代码。 所以一个常见的标准就是对于每一个元素或者组件使用一个事件处理句柄，内部根据event type 触发不同的action。这个非常有利多个event共享同一个action的时候。

React的事件是复用的，而且有一个全局的处理句柄。第一个概念意味着不能存储事件也不能稍候复用它，因为触发了action之后，它就变成了 null。但是可以调用事件的persist方法，来使事件持久化，能够存储并稍候使用 。 当使用On+ eventname来给元素邦定事件的时候，实际上并没有邦定实际的句柄给底层的DOM node 。 相反则是给根元素添加了一个事件句柄，根元素是监听所有的事件的（event bubble和事件代理）

[dlrandy]

有时候需要访问底层的 ＤＯＭ节点来执行一些命令式的操作。

ref的回调函数是在组件挂载的时候调用的。组件卸载的时候用null在进行一次回调执行来释放内存。

当ref的回调用在非原生的组件（自定义的组件）的时候，，引用的不再是DOM 本身而是组件的实例。

React里实现动画功能一般： 1、使用react-addons-css-transition-group组件 2、使用react-motion这个库

[dlrandy]

icon fonts有一些问题，第一他们不可访问。第二很难使用css定位它们。而且所有的浏览器显示的不一致。

react里渲染svg和div没什么区别。 使用svg是因为可以在运行时使用css或者js对他们进行修改。