React学习笔记
用于构建用户界面(UI)的 JAVASCRIPT 库,React 拥有较高的性能,代码逻辑非常简单
React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI
可以直接使用 BootCDN 的 React CDN 库,地址如下:
实际上线的时候,应该将它放到服务器完成。
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><!-- React 的核心库 --> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <!-- 提供与 DOM 相关的功能 --> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script><!-- Babel 内嵌了对 JSX 的支持 -->
JSX: HTML 语言直接写在 JavaScript 语言之中,不加任何引号
替代常规的 JavaScript,执行更快,编译过程能发现错误, 编写模板更加简单快速。
ReactDOM.render :用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
React.createClass 用于生成一个组件类,然后像插入普通 HTML 标签一样,在网页中插入这个组件。
组件类的第一个字母必须大写,否则会报错
组件类只能包含一个顶层标签,否则也会报错。
所有组件类都必须有自己的 render 方法,用于输出组件
组件的用法与原生的 HTML 标签完全一致,可以任意加入属性
<Hello name='world'>就是 Hello 组件加入一个 name 属性,值为world
组件的属性可以在组件类的 this.props 对象上获取,
添加组件属性,有一个地方需要注意,就是 class 属性需要写成 className ,
for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
this.props.children 属性。它表示组件的所有子节点。this.props.children
的值有三种可能。React 提供一个工具方法 React.Children
来处理 this.props.children
。我们可以用 React.Children.map
来遍历子节点,而不用担心 this.props.children
的数据类型是 undefined
还是 object
。
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="John" />, document.getElementById('example') );
this.state:
React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI