渲染元素和组件

本文是本人自己辛苦翻译的,请转载的朋友注明,翻译于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')
);

CodePen 展示下以上代码

根据上面的代码,做一个小的剖析。

  • 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')
);

Try it on CodePen.

一般情况下,新的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.

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;
}

推荐阅读更多精彩内容

  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 6,833评论 14 129
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 1,202评论 0 5
  • React 元素 ReactNode ReactNode 是虚拟 DOM 的基本构建,可以是以下任意一种核心类型 ...
    不二很纯洁阅读 6,886评论 3 77
  • 安装: 概述 React起源于FaceBook的内部项目,因为该公司对市场上所有的JavaScript MVC框架...
    姒沝無痕阅读 311评论 0 0
  • 组件和 Props 组件让你将 UI 拆分成独立的,可复用的部件,并且把每个部件都隔离出来单独考虑。 从概念上讲,...
    soojade阅读 379评论 0 1