美文网首页
渲染元素和组件

渲染元素和组件

作者: ZMJun | 来源:发表于2017-06-27 18:10 被阅读18次

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

相关文章

  • 渲染元素和组件

    本文是本人自己辛苦翻译的,请转载的朋友注明,翻译于Z.MJun的简书 ,感谢!<翻译不容易啊> 翻译于2017年6...

  • 学习并实现react (3)

    复用组件 React 组件书写规则 组件可以直接渲染组件组件渲染多个children 时需要用 dom 元素进行包...

  • Vue指令

    指令 v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。 v-...

  • 插槽学习

    1.插槽子组件里的内容不会被渲染,子组件template中加入 元素占位便能渲染父组件...

  • vue 元素/组件 :key

    在元素/组件中使用:key,动态绑定元素/组件的key;可以起到强制刷新/重新渲染的效果(替换为新的元素/组件,而...

  • React列表 & Key

    渲染多个组件 使用 {} 在 JSX 内构建一个元素集合。 基础列表组件 在一个组件中渲染列表。 key key ...

  • react相关性能优化(持续更新)

    1.避免重复渲染 当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定...

  • 说说 Vue.js 中的 v-once 指令

    被定义了 v-once 指令的元素或组件(包括元素或组件内的所有子孙节点)只能被渲染一次。首次渲染后,即使数据发生...

  • vue动画过渡-transition-标签

    Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 ...

  • Vue3_21(transition动画组件)

    Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡: 条件渲染...

网友评论

      本文标题:渲染元素和组件

      本文链接:https://www.haomeiwen.com/subject/rpascxtx.html