注意点:
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 来修改状态。
网友评论