2018.4.25

2018-12-29  本文已影响3人  天空之城_2692

注意点:

1、凡事用到JSX,script标签的type属性为text/babel

2、三个库文件:他们必须首先加载

react.js:react核心库

react-dom.js:提供与dom相关的内容

Browser.js将 JSX 语法转为 JavaScript 语法

3、ReactDOM.render()react是最基本的方法,将模版转换作为html语言,并插入指定的dom节点

4、<div>//这里jsx的基本语法规则,遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用JavaScript 规则解析。

{

}

</div>

5、直接在模版插入js变量var arr=[<h1>a</h1>,<h2>b</h2>];

<div>{arr}</div> arr是数组变量, JSX 会把它的所有成员添加到模版

<div>

<h1>a</h1>

<h1>b</h1>

</div>

6、组件。将代码封装成组件,像插入html标签一样,在网页中插入,React.createClass方法用于生成一个组件类,组件类第一个字母必须大写,只能包含一个顶层标签

所有组件类必须有自己的render方法,用于输出组件

其次就是

Mobx基于观察者模式,采用多节点管理数据,是一个很轻量、入手简单、代码耦合小的数据框架。

Mobx 的理念非常简单,可以用一个 demo 就把其核心原理说清楚。Mobx/MobxReact 中有三个核心概念,observable、observer、action。为了简单起见,本文没有提及 computed 等概念。

observable: 通过 observable(state) 定义组件的状态,包装后的状态是一个可观察数据(Observable Data)。

observer: 通过 observer(ReactComponent) 定义组件。

action: 通过 action 来修改状态。

上一篇 下一篇

猜你喜欢

热点阅读