本文是本人自己辛苦翻译的,请转载的朋友注明,翻译于Z.MJun的简书 ,感谢!<翻译不容易啊>
翻译于2017年6月26日,原文
Rendering Elements
React app中元素是最小构建块。如
const element = <h1>Hello, world</h1>;
与浏览器的DOM元素不一样,React的元素是对象并且容易创建。React Dom负责更新Dom的React元素。
Rendering an Element into the DOM
在Dom下渲染元素。在Html下有以下代码
<div id="root"></div>
React Dom就是从这个代码开始,因为所有的内容都会通过这里开始。就是纯代码写界面,写逻辑。
使用React构建应用,一般都会有一个简单的dom节点。如果在已有的项目里,你可以构建多个独立的dom节点。
渲染一个React元素到Root Dom节点里。请使用用ReactDOM.render()
,如下图。
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
运行在浏览器上就能看到Hello, world
。
Updating the Rendered Element
更新渲染对象。React的元素是不可变的。当创建了一个元素,就不能改变子元素和属性。如同,电影里面的一帧,已经在某个时间点内展示了样式。
目前的解决方案是,创建一个新的元素,然后使用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);
以上代码是,每秒修改一次时间,效果如下:
DOM inspector showing granular updates
React Only Updates What's Necessary
React Dom对比元素和其子元素的上一个,并只要求Dom更新到想要的效果。
Components and Props
组件可以使得UI切分成多个独立的快,使用性更好,并且更好维护。从概览上说,组件更像是JS方法,能够接受任意的输入(called "props")
并把效果展示在界面上。
Functional and Class Components
函数和组件类,最简单的定义组件方法是写一个JS的函数,如:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
这是一个可用的React组件,接受输入和返回React元素。一般会叫组件函数,从代码上看类似JS函数。
同样可以使用ES6来定义组件,如:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
以上两个效果是等价的。
渲染组件
React元素表达式,如下:
const element = <div />;
同样,元素可以使用自定义表达式
const element = <Welcome name="Sara" />;
当一个React的元素的表达式使用了自定义组件。那么通过JSX来使用这个组件就相当于一个简单的对象。这样的对象叫props
。如:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
根据上面的代码,做一个小的剖析。
- 1.使用
ReactDOM.render()
来引入<Welcome name="Sara" />
这个元素 - 2.React调用
Welcome
这组件(函数),再通过参数props
传入{name: 'Sara'}
。 - 3.这个组件(函数),就会返回
<h1>Hello, Sara</h1>
。 - 4.再通过React DOM来更新内容。
重点说明:
组件名称一般会是首字母大写,驼峰式命名。
例如:<div />
是Dom标签,<Welcome />
则是代表组件和请求这个组件。
组件的组成部分
组件间是可以嵌套的。另外,按钮,输入框,警告,窗口在React应用里面,通常也是组件。
嵌套如下代码:
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')
);
一般情况下,新的React应用都会有一个简单的顶层组件。但是,在已有项目下,有可能会从一个简单组件开始入手,知道最顶层逐渐。
重点说明:
逐渐必须返回一个root元素,并且需要把组件都添加在<div>
里面。
Extracting Components
别担心把组件切分成小的组件。
例如,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>
);
} //这不是完整代码,看Try it on CodePen.
以上代码是在浏览器上显示一个用户数据,如头像,名称,时间。但是,由于使用了多层嵌套,所以要复用比较苦难,为了能够提高复用性和可读性,需要进一步解剖分解组件。
这里的剖析对于初学者有用,对于老司机来说可以不用看。
- 1.分解头像
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
- 2.用户头像,姓名
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
- 3.最后嵌入
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>
);
}
Try it on CodePen.
Props are Read-Only
参数和只读。
无论定义的组件是函数还是类,输入的参数都是不能修改的。如:好的写法
function sum(a, b) {
return a + b;
}
不好的写法,在内部修改参数
function withdraw(account, amount) {
account.total -= amount;
}
网友评论