React Best practice

[dlrandy]

命令编程和声明编程的区别： 命令是如何完成某件事（call waitress to hold glass and pout beer in it then give me），详细地指出step；声明是直接要某件事的结果。(Beer please)。

声明式编程的代码简洁 易于维护

声明式编程不需要使用变量也不需要在执行的时候追踪value更新。本质上声明式的编程就是避免创建和修改state的。

[dlrandy]

为什么使用React 声明式编程简单易用，代码简单 bug少 易于维护

React Element

react component 要么是继承Component的class，要么是stateless的函数。

React使用element来控制UI 流，它是一个immutable的对象，只包含那些描述Interface的信息

element 就是下面 这种形状 { type: tag/Component, children: { color: 'red', children: {} } }

React 是在运行时管理react组件实例（我认为就是Element）的，Element的类型很重要，如果是字符串，React 认为element是DOM Node，类型是函数则认为是Component。

Element里的React DOM和Component 可以相互内置来描述渲染树。

Reconciliation 在React拿到渲染树，进行htmlDOM 描述的时候，它拿到的是React 的 Elements，然后渲染Element，如果element的类型是函数，Reatc就会调用这个函数，并把props传给他，然后拿到低层的element。再在element递归执行同样的操作直到得到完整的DOMtree，然后React 将其 渲染到屏幕上。

[dlrandy]

React 解决的就是代码的关注分离问题。 因为模板引擎 只是将表面上进行了分离，实际上JS和HTML还是耦合的，css也是。

Css in JS 。

掌握好基础 对最佳实践很重要

转译 source--> new Compatible source 编译source --〉 executable source

在JSX 里组建的开头字母要大写 React.createElement('button') React.createElement((Button)

JSX 的Children 不必是element，也可以是函数或者变量

时刻记住JSX最终是要编译javascript的， 所以attribute（class，for等）和style（只接收对象）

JSX编译成函数，要知道函数不能返回两个函数的，所以你有多个root element，那么就需要一个新的parent将这两个element包装起来。

JSX element 里的空格你要显示的用空字符串 表示出来，否则认为i没有的哈

JSX 里的布尔属性 出现没有指定值就是true，false要显示设定

JSx 的一个最佳实践就是不要传递一个整个对象给children，应该使用spread操作符号进行展开，传递基本类型值，而且易于验证，在收集，

JSX 的常见模式： 内置的Element （不是变量或者文本的时候）要使用MultiIine: render 里的return 后面要加上(); MultiProperties的时候，一个属性占一行； 有条件的渲染：&& \ ? : \ getter 函数或者声明普通的，同样对于computed properties 最好使用getter； 对于循环要使用声明式的； 当render方法太大的时候，要拆分一个个小的渲染函数（sub rendering）；

Eslint： { rules: { semi: [2, 'never'] } } 上面规则的意思就是不要(never)有分号，一旦出现就抛出异常(2); off:0(cancel the rule), warn:1;error:2;

FP的基础： 高阶函数就是接受一个函数参数（其他参数可选）并返回一个函数的函数。 Purity：不改变不影响周边环境 ； Immutability：不改变变量值而是产生新的值； 克理化函数就是把一个接受多个参数的函数转化 成接受一个接受一个参数的函数，最终返回另一个函数； Composition：合并多个函数形成一个新函数： const add = (x, y) => x + y; const square = x => x * x; const addAndSquare = (x, y) => square(add(x, y));

FP 和UI的关系就是 Const ui = f(state)