react1

时间 2019-11-18

标签 react1 react 栏目 React 繁體版

原文原文链接

<body>

<div id="example"></div>html

<script src="src/libs/react.js"></script>

<script src="src/libs/JSXTransformer.js"></script>前端

</body>前端工程化

总结浏览器

React 的核心思想是：封装组件，各个组件维护本身的状态和 UI，当状态变动，自动从新渲染整个组件。基于这种方式的一个直观感觉就是咱们再也不须要不厌其烦地来回查找某个 DOM 元素，而后操做 DOM 去更改 UI。服务器

JSX 并非一门全新的语言，仅仅是一个语法糖，容许开发者在JavasSript中编写XML语言。工具

做为React的核心部分，JSX使用XML标记的方式直接声明页面。在JavaScript代码里直接写XML的语法，每个XML标签都会被JSX转换工具转换成纯JavaScript代码。(学习React的第一个坑)学习

注意：使用JSX写的代码，须要编译输出成JS代码才能使用。将 JSX 语法转为 JavaScript 语法，这一步很消耗时间。如今前端项目，都会使用前端工程化，不会直接在html页面中直接写js代码，写好的js代码都会使用工具进行编译压缩等。这样的话，咱们的JSX也会经过编译直接转化成js语法，让浏览器直接使用。orm

好消息是你不用使用这个JSX也能够直接建立组件，可是坏消息是，不用JSX你必须使用原声JavaScript经过大段的API来建立。

如此使用JSX

JSX定义属性&&样式使用

在HTML中，能够经过标签上的属性来改变当前元素的样式，固然，这在JSX中也是能够的，只不过JSX在使用行内样式的时候是有缺陷的。使用{{}}而不是引号的方式。

直接在标签上使用style属性时，要写成style={{}}是两个大括号，外层大括号是告知JSX这里是js语法，和真实DOM不一样的是，属性值不能是字符串而必须为对象，须要注意的是属性名一样须要驼峰命名法。即margin-top要写成marginTop，属性之间以逗号间隔。

使用变量：

JSX将两个花括号中的内容{...}渲染成动态值，花括号指明了一个JavaScript上下文环境————你在花括号中放置的任何内容都会被求值。

1.最后一个script标签的type属性为text/jsx。这是由于React独有的JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上type=”text/jsx”。

2.React提供两个库：react.js和JSXTransformer.js，它们必须首先加载，其中JSXTransformer.js的做用是将JSX语法转为JavaScript语法。这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

React.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。