传统的前端开发思路是用分离式的HTML/CSS、非侵入式JS、模板语言、MVC、CSS文件、Bootstrap等。React让组件化成为了前端开发的基本思路，比传统思路可以更好的控制前端复杂度，组件把数据翻译成UI，数据通过组件props属性传入，组件自身状态通过state状态值来控制， 每个组件都是一个状态机，也就是声明式编程，数据有变化，组件自动刷新。
JSX
JSX是JavaScript的语法扩展(extension)，在JavaScript中可以编写像HTML一样的代码，JSX中的表达式要包含在大括号里。
Vue与React
Vue的基本思路是基于HTML模板的扩展，而React的基本思路是基于JS语言的扩展。由于Vue的写法更接近于传统，所以对于习惯了HTML的开发者更容易接受；而React中的JSX语法需要一定的学习成本。但一旦掌握了，再基于强大的社区力量，就可以使用JS语言来表达一切，使用起来非常流畅。
【模板字符串】
可以在JSX中使用模板字符串
{`Joined in ${time}`}
【属性】
可以使用引号来定义以字符串为值的属性：
const element = <div tabIndex="0"></div>;
也可以使用大括号来定义以 JavaScript 表达式为值的属性：
const element = <img src={user.avatarUrl} />;
下面这两个 JSX 表达式是等价的：
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />
【默认为true】
如果没有给属性传值，它默认为 true
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
【扩展属性】
如果已经有了个 props 对象，并且想在 JSX 中传递它，可以使用 ... 作为扩展操作符来传递整个属性对象。下面两个组件是等效的：
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
【return】
return一定要紧挨着左括号，否则不生效
【JSX是进步还是倒退】
长期以来，一直不倡导在HTML中使用onclick，为什么在JSX中却要使用onClick这样的方式来添加事件处理函数呢？
在React出现之初，很多人对React这样的设计非常反感，因为React把类似HTML的标记语言和Javascript混在一起了。但是，随着时间的推移，业界逐渐认可了这种方式，因为大家发现，以前用HTML来代表内容，用CSS代表样式，用JavaScript来定义交互行为，这三种语言分在三种不同的文件里面，实际上是把不同技术分开管理了，而不是逻辑上的“分而治之”。
根据做同一件事的代码应该有高耦合性的设计原则，为什么不把实现这个功能的所有代码集中在一个文件里呢？
在JSX中使用onClick来添加事件处理函数，是否代表网页应用开发兜了一个大圈，最终回到了起点呢？
不是的，在HTML中直接使用onclick很不专业，因为onclick添加的事件处理函数是在全局环境下执行的，这污染了全局环境，很容易产生意料不到的后果；给很多DOM元素添加onclick事件，可能会影响网页的性能；对于使用onclick的DOM元素，如果在DOM元素删除后忘了注销事件处理函数，可能会造成内存泄漏。
上面说的这些问题在JSX中都不存在：
onClick挂载的每个函数，都可以控制在组件范围内，不会污染全局空间；在JSX中使用了onClick，但并没有产生直接使用onclick的HTML，而是使用事件委托的方式处理，无论多少个onclick出现，最后都只在DOM树上添加了一个事件处理函数，挂在最顶层的DOM节点上；因为React控制了组件的生命周期，在unmount时自然能够清除相关的所有事件处理函数，内存泄漏也不再是一个问题。
网友评论