React JS 学习(二)

JSX

虽然 JSX 不是 React 必须使用的, 但是它是 React 推荐使用的, 因为它可以定义简洁且我们熟知的包含属性的树状结构语法, 便于阅读和维护.

HTML标签 与 React组件 对比

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes).
要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名.

var myDivElement = 
;
ReactDom.render(myDivElement, document.body);

要渲染 React 组件，只需创建一个大写字母开头的本地变量.

class MyComponent extends React.Component {
    render() {
        return (
)
    }
}
var myElement = ;
ReactDom.render(myElement, document.body);

• React 的 JSX 里约定分别使用首字母大, 小写来区分本地组件的类和 HTML 标签.
• 由于 JSX 就是 JavaScript, 一些标识符像 class 和 for 不建议作为 XML 属性名. 作为替代, React DOM 使用 className 和 htmlFor 来做对应的属性.

JavaScript 表达式

1. 要使用 JavaScript 表达式作为属性值, 只需把这个表达式用一对大括号 ({}) 包起来, 不要用引号 (“”).

// 输入 (JSX):
var person = ;

// 输出 (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

2. JavaScript 表达式可用于描述子结点.

// 输入 (JSX):
var content = {window.isLoggedIn ?  : };

// 输出 (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(View1) : React.createElement(View2)
);

3. JavaScript 表达式展示注释. 我们只需要用 {/* 注释 */} 就行.

Component

React 允许将代码封装成组件(component), 然后像插入普通 HTML 标签一样, 在网页中插入这个组件.

class Welcome extends React.Component {
    render() {
        return (
            
es6 定义组件
        )
    }
}
ReactDom.render(
    ,
    document.getElementById("root")
)

有两点需要注意: 组件类的第一个字母需要大写, 组件类只能包含一个顶层标签.

ref 属性

组件并不是真实的 DOM 节点, 而是存在于内存之中的一种数据结构, 叫做虚拟 DOM (virtual DOM). 只有当它插入文档以后, 才会变成真实的 DOM.

根据 React 的设计, 所有的 DOM 变动, 都先在虚拟 DOM 上发生, 然后再将实际发生变动的部分, 反映在真实 DOM 上, 这种算法叫做 DOM diff , 它可以极大提高网页的性能表现.

每个组件默认都会一个 ref 属性, 我们能根据这个属性获取到真是的 DOM 节点.

 {
    //     this.setState({
    //         value: event.target.value
    //     })  
    // }}

    // 非受控组件的用法
    // 非受控组件将数据保存在Dom中, 方便直接使用
    ref={(inputText) => {this.inputText = inputText}}
/>

对于文本输入框, 我们可以根据 ref 来直接拿到真实 DOM 节点中的用户输入.

我们也可以通过 this.refs.refName 来直接获取到真实的 DOM 节点. 也就是组件的对象. 拿到组件的对象, 我们可以读写对象的变量, 调用对象的函数等.

当然我们也不能过度使用 ref, 毕竟拿到的是真实 DOM 节点, 如果虚拟节点的数据没有及时更新到真实节点, 那么操作真实节点就会出错. 以下几个实际时机适合使用 ref 属性.

• 管理文本框用户输入, 文本选择, 媒体播放.
• 一定会发生的动画.
• 与第三方DOM库集成.

组件的生命周期

这张图 清晰的展示了组件的生命周期.

组件的生命周期

后记

React 所涉及到的概念我并没有全部写上去, 如果以后遇到有趣的知识点再做补充.

参考

React - 组件