JSX
虽然 JSX 不是 React 必须使用的, 但是它是 React 推荐使用的, 因为它可以定义简洁且我们熟知的包含属性的树状结构语法, 便于阅读和维护.
HTML标签 与 React组件 对比
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes).
要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名.
var myDivElement = <div className="foo" />;
ReactDom.render(myDivElement, document.body);
要渲染 React 组件，只需创建一个大写字母开头的本地变量.
class MyComponent extends React.Component {
render() {
return (<div></div>)
}
}
var myElement = <MyComponent someProperty={true} />;
ReactDom.render(myElement, document.body);
- React 的 JSX 里约定分别使用首字母大, 小写来区分本地组件的类和 HTML 标签.
- 由于 JSX 就是 JavaScript, 一些标识符像 class 和 for 不建议作为 XML 属性名. 作为替代, React DOM 使用 className 和 htmlFor 来做对应的属性.
JavaScript 表达式
- 要使用 JavaScript 表达式作为属性值, 只需把这个表达式用一对大括号 ({}) 包起来, 不要用引号 (“”).
// 输入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 输出 (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
- JavaScript 表达式可用于描述子结点.
// 输入 (JSX):
var content = <Container>{window.isLoggedIn ? <View1 /> : <View2 />}</Container>;
// 输出 (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(View1) : React.createElement(View2)
);
- JavaScript 表达式展示注释. 我们只需要用 {/* 注释 */} 就行.
Component
React 允许将代码封装成组件(component), 然后像插入普通 HTML 标签一样, 在网页中插入这个组件.
class Welcome extends React.Component {
render() {
return (
<div>es6 定义组件</div>
)
}
}
ReactDom.render(
<Welcome />,
document.getElementById("root")
)
有两点需要注意: 组件类的第一个字母需要大写, 组件类只能包含一个顶层标签.
ref 属性
组件并不是真实的 DOM 节点, 而是存在于内存之中的一种数据结构, 叫做虚拟 DOM (virtual DOM). 只有当它插入文档以后, 才会变成真实的 DOM.
根据 React 的设计, 所有的 DOM 变动, 都先在虚拟 DOM 上发生, 然后再将实际发生变动的部分, 反映在真实 DOM 上, 这种算法叫做 DOM diff , 它可以极大提高网页的性能表现.
每个组件默认都会一个 ref 属性, 我们能根据这个属性获取到真是的 DOM 节点.
<input
type='text'
placeholder='请输入内容'
id='input'
// 受控组件的用法
// onChange={(event) => {
// this.setState({
// value: event.target.value
// })
// }}
// 非受控组件的用法
// 非受控组件将数据保存在Dom中, 方便直接使用
ref={(inputText) => {this.inputText = inputText}}
/>
对于文本输入框, 我们可以根据 ref 来直接拿到真实 DOM 节点中的用户输入.
我们也可以通过 this.refs.refName 来直接获取到真实的 DOM 节点. 也就是组件的对象. 拿到组件的对象, 我们可以读写对象的变量, 调用对象的函数等.
当然我们也不能过度使用 ref, 毕竟拿到的是真实 DOM 节点, 如果虚拟节点的数据没有及时更新到真实节点, 那么操作真实节点就会出错. 以下几个实际时机适合使用 ref 属性.
- 管理文本框用户输入, 文本选择, 媒体播放.
- 一定会发生的动画.
- 与第三方DOM库集成.
组件的生命周期
这张图 清晰的展示了组件的生命周期.
后记
React 所涉及到的概念我并没有全部写上去, 如果以后遇到有趣的知识点再做补充.
