1.Hello World
一个简单的react的例子
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
它渲染了一个 “Hello, world!” 的标题。
React是一个JavaScript库
2.JSX简介
下面是一个JSX, 它是一种 JavaScript 的语法扩展,完全是在 JavaScript 内部实现的。
const element = <h1>Hello, world!</h1>;
在 JSX 中使用表达式
在 JSX 当中的表达式要包含在大括号里。
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
JSX 本身其实也是一种表达式
在编译之后呢,JSX 其实会被转化为普通的 JavaScript 对象。
这也就意味着,你其实可以在 if
或者 for
语句里使用 JSX,将它赋值给变量,当作参数传入,作为返回值都可以:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
JSX 属性
你可以使用引号来定义以字符串为值的属性:
const element = <div tabIndex="0"></div>;
也可以使用大括号来定义以 JavaScript 表达式为值的属性:
const element = <img src={user.avatarUrl}></img>;
JSX 嵌套
如果 JSX 标签是闭合式的,那么你需要在结尾处用 />
, 就好像 XML/HTML 一样:
const element = <img src={user.avatarUrl} />;
JSX 标签同样可以相互嵌套:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSX 防注入攻击
你可以放心地在 JSX 当中使用用户输入:
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的:
const element = <h1>{title}</h1>;
React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。
JSX 代表 Objects
Babel 转译器会把 JSX 转换成一个名为 React.createElement()
的方法调用。
下面两种代码的作用是完全相同的:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()
这个方法首先会进行一些避免bug的检查,之后会返回一个类似下面例子的对象:
// 注意: 以下示例是简化过的(不代表在 React 源码中是这样)
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。
3.元素渲染
元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容:
const element = <h1>Hello, world</h1>;
将元素渲染到 DOM 中
首先我们在一个 HTML 页面中添加一个 id="root"
的 <div>
:
<div id="root"></div>
在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称之为 “根” DOM 节点。
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
页面上会展示出 “Hello World” 字样。
更新元素渲染
更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render()
方法:
看一下这个计时器的例子:
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
这个示例通过 setInterval()
方法,每秒钟调用一次 ReactDOM.render()
.
React 只会更新必要的部分
React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分。
4.组件 & Props
组件可以将UI切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。
函数定义/类定义组件
函数定义组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
组件渲染
在前面,我们遇到的React元素都只是DOM标签:
const element = <div />;
然而,React元素也可以是用户自定义的组件:
const element = <Welcome name="Sara" />;
当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。
例如,这段代码会在页面上渲染出”Hello,Sara”:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
我们来回顾一下在这个例子中发生了什么:
- 我们对
<Welcome name="Sara" />
元素调用了ReactDOM.render()
方法。 - React将
{name: 'Sara'}
作为props传入并调用Welcome
组件。 Welcome
组件将<h1>Hello, Sara</h1>
元素作为结果返回。- React DOM将DOM更新为
<h1>Hello, Sara</h1>
。
组合组件
组件可以在它的输出中引用其它组件,这就可以让我们用同一组件来抽象出任意层次的细节。在React应用中,按钮、表单、对话框、整个屏幕的内容等,这些通常都被表示为组件。
例如,我们可以创建一个App
组件,用来多次渲染Welcome
组件:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
提取组件
你可以将组件切分为更小的组件,这没什么好担心的。
例如,来看看这个Comment
组件:
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
简单的提取一下
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
Props的只读性
无论是使用函数或是类来声明一个组件,它决不能修改它自己的props。来看这个sum
函数:
function sum(a, b) {
return a + b;
}
类似于上面的这种函数称为“纯函数”,它没有改变它自己的输入值,当传入的值相同时,总是会返回相同的结果。
所有的React组件必须像纯函数那样使用它们的props。