首页 > 代码库 > 浅析 react
浅析 react
- JSX
- 注释:在一个组件的子元素位置使用注释要用 {} 包起来
-
const App = ( <Nav> {/* 节点注释 */} <Person /* 多行 注释 */ name={window.isLoggedIn ? window.name : ‘‘} /> </Nav> );
但 HTML 中有一类特殊的注释——条件注释,它常用于判断浏览器的版本:
-
<!--[if IE]> <p>Work in IE browser</p> <![endif]-->
上述方法可以通过使用 JavaScript 判断浏览器版本来替代:
-
{ (!!window.ActiveXObject || ‘ActiveXObject‘ in window) ? <p>Work in IE browser</p> : ‘‘ }
-
-
元素属性
-
class 属性改为 className
-
for 属性改为 htmlFor
-
-
React 组件的构建
- React 组件即为组件元素
- React 组件基本上由 3 个部分组成——属性(props)、状态(state)以及生命周期方法
-
React 组件可以接收参数,也可能有自身状态。一旦接收到的参数或自身状态有所改变,
React 组件就会执行相应的生命周期方法,最后渲染。整个过程完全符合传统组件所定义的组件
职责。
- React 组件的构建方法
-
React.createClass
-
const Button = React.createClass({ getDefaultProps() { return { color: ‘blue‘, text: ‘Confirm‘, }; }, render() { const { color, text } = this.props; return ( <button className={`btn btn-${color}`}> <em>{text}</em> </button> ); } });
- 在 0.14 版本发布之前,这一直都是 React 官方唯一指定的组件写法
-
只用写成 <Button />,就可以被解析成 React.createElement(Button) 方法来创建 Button
实例,这意味着在一个应用中调用几次 Button,就会创建几次 Button 实例
-
-
ES6 classes
-
import React, { Component } from ‘react‘; class Button extends Component { constructor(props) { super(props); } static defaultProps = { color: ‘blue‘, text: ‘Confirm‘, }; render() { const { color, text } = this.props; return ( <button className={`btn btn-${color}`}> <em>{text}</em> </button> ); } }
React 的所有组件都继承自顶层类 React.Component。它的定义非常简洁,只是初始化了
React.Component 方法,声明了 props、context、refs 等,并在原型上定义了 setState 和
forceUpdate 方法。内部初始化的生命周期方法与 createClass 方式使用的是同一个方法
创建的。
-
无状态函数(stateless function)
-
function Button({ color = ‘blue‘, text = ‘Confirm‘ }) { return ( <button className={`btn btn-${color}`}> <em>{text}</em> </button> ); }
-
无状态组件只传入 props 和 context 两个参数;也就是说,它不存在 state,也没有生命周
期方法,组件本身即上面两种 React 组件构建方法中的 render 方法。不过,像 propTypes 和
defaultProps 还是可以通过向方法设置静态属性来实现的。 -
在适合的情况下,我们都应该且必须使用无状态组件。无状态组件不像上述两种方法在调用
时会创建新实例,它创建时始终保持了一个实例,避免了不必要的检查和内存分配,做到了内部
优化。
-
-
- 注释:在一个组件的子元素位置使用注释要用 {} 包起来
浅析 react