这是我的第一个基于 React 实现的项目，当然，完成下来，个人收获很多，比如，最基本的，对于 React 的语法理解更深入了。
1.React 的基本思想
React 的最基本思路我们其实常常用到，在原生代码的书写中，我们为了方便，常常也会用到一个类似的“生成元素”的东西：
function elt(type, props, ...children) {
let dom = document.createElement(type);
if (props) Object.assign(dom, props);
for (let child of children) {
if (typeof child == Number) child = String(child);
if (typeof child != "string") dom.appendChild(child);
else dom.appendChild(document.createTextNode(child));
}
return dom;
}
有了它，我们就可以很方便地在 JavaScript 代码中，构建一个功能完整的元素，直接渲染到 html 中，
// in <body>
<div id="root"></div>
// in script
let dom = elt("div", {className:"wrapper"}, elt("p", {style: "background-color:#666; font-size:30px"}, "hello, world!"))
rount.appendChild(dom);
//result
dom.png
而 React 告诉给我们，直接按照标签书写就行 ……
<div className="wrapper">
<p>hello, world!</p>
</div>
当然，除此之外，React 还有很多其它特点，它有个非常精妙的地方在于，把标签的属性作为参数传给子元素，这样就实现了父子元素之间的通信，状态变更变得特别方便，
在项目中，我把登录界面、注册界面、重置密码界面分别做成三个组件，三个组件在第一时间渲染好；
然后用一个 wrapper 类组件把它们包起来，这个类组件就包含了界面的基本数据，决定了这三个子组件谁显示，但是这个做决定的动作并不是在 wrapper 做的，而是，wrapper 构造了必要的函数，把函数作为参数传给相应的子元素，子元素在用户点击按钮的时候就会触发函数，更改父级的状态。
从而，几个界面就可以自由切换了。
另外，React 又十分高效，它只重新渲染需要渲染的部分。（dom diff）
其它收获，
2.React 组件语法可以如何写
比如，我们可以把由多个组件构成的数列，扔到一个组件中，这个数列中的组件都会被显示出来；
还可以通过三元运算符来决定一个组件是否显示：
{21 % 2 ? <p>整除就显示</p> : null}
3.React 中的函数组件和类组件分别在什么场景下可以用到；
函数组件内部是没有状态变更的，一旦设计到状态，我们首选就是类组件；
不过，这并不意味着，有状态的时候我们就非得用函数组件不可 —— 我们可以考虑把确定状态的数据移到函数之外。
顺带着，我还掌握了
4.用 webpack 来自动转化代码的原理；
5.如何用 leanCloud 实现信息存储、获取、用户注册、（自动）登录、状态变更、登出、设置用户访问权限等；
6.进一步，由于不得不重复思考调用 this ，于是，感觉自己对于 this 的认识又提升了几个层级 ……
7.对于，React 重构了整个项目的代码结构，有了一定的理解。
原先我们写一个项目是这样的：
HTML 代码放一块，CSS 代码放一块， JavaScript 代码放一块。
normal.png
这就是我们把小心讲究把代码分离的结果，非常整齐，而且这么看的好，思路也非常清晰，我们不免都要怀疑 React 那种把 HTML 与 JS 甚至连 CSS 都混到一块的做法是否可取。
如果我们只是从代码的干净程度比较，那毫无疑问原生朴素的写法优势很大，但是呢，如果我们换个角度：
react.png
真相就出来了，
由于 React 的语言特点，把做同一件事情的 html 和 JavaScript都放到一块了，最直接的结果就是无论是我们写代码的人还是阅读的人，都更容易看明白代码结构 —— React 代码结构其实在另外一个维度是更清晰的。
而且我们也几乎用不到那麻烦又不太靠谱的 dom API ……
网友评论