React docs Components and Props

2018-08-10 admin

组件使 UI 分离为独立可服用的块,可隔离思考每一个块。这页介绍组件理念。在此查阅 组件 API 参考

概念上讲,组件与 JavaScript 函数相像。他们接受任意输入(称为 “props”) 然后返回描述屏幕上显示的 React elements 。

函数组件、类组件

定义一个组件最简单的方式是写一个 JavaScript 函数:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

这个函数是一个有效的 React component 因为它接受了单一的 “props”(这个是 properties 的缩写)对象数据参数且返回了一个 React element. 我们称这样的组件为 “functional” 因为他们就是 JavaScript functions 的字面含义。

也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

以上两种组件对 React 来说没有区别。

classes 有额外的特点我们下一部分讨论。在那之前,简明旗舰我们使用函数组件。

渲染组件

之前,我们只鼓励 React elements 呈现 DOM 标签:

const element = <div />;

然而, elements 也能呈现自定义组件:

const element = <Welcome name="Sara" />;

当 React 发现一个 element 呈现用户自定义组件,它会将 JSX 属性做为单个对象传递到这个组件。 我们称这个对象 “props”.

例如: 这个代码在页面渲染出 “Hello, Sara”:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

在线尝试

扼要重述例子中发生了什么:

  1. 调用 ReactDOM.render()<Welcome name=“Sara” /> element.
  2. 基于 {name: ‘Sara’} 作为props React 调用 Welcome 组件。
  3. Welcome 组件返回结果 <h1>Hello, Sara</h1> element。
  4. ReactDOM 高效更新 DOM 匹配 <h1>Hello, Sara</h1>

Note: 组件命名以大写字母开头。 React 将小写开头的组件当做 DOM 标签处理。例如,<div /> 表示一个 HTML div 标签, 但是 <Welcome /> 表示一个组件而且需要 Welcome 在其之内。

此惯例更详细原因

编译组件

组件可以指它们输出中的其他组件。这使得可以在任意细节层级使用同样的组件。 按钮、表单、对话框、屏幕:在 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')
);

在线尝试

典型的,新 React 应用有单独一个 App 组件在最外层。然而整合 React 到一个已有的应用,你应该从一个类似 Button 的小组件开始, 渐渐扩展到最上层视图层级。

提取组件

不要害怕吧组件粉等更小的组件。 例如, 思考 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">
        {formateDate(props.date)}
      </div>
    </div>
  );
}

在线尝试

组件接受 author(对象), **text(字符串)**和 date(日期) 作为 props, 描绘一个 评论界面到社交网站上。

这个组件修改需要技巧因为所有嵌套很难复用独立的部分。我们从中提取一些组件出来。

第一步我们提取 Avatar:

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
     />
   );
}

Avatar 不需要知道它被渲染在一个 Comment中。这是为什么我们给它的 prop 取一个通用的名字: user 而不是 author.

我们建议为组件 props 命名从组件自身角度出发,而不是内容在哪里使用。

我们还可以简化 Comment 一点:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formateDate(props.date)}
      </div>
    </div>
  );
}

接下来,我么提取一个 UserInfo 组件紧邻用户的名称来渲染 Avatar

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

更近一步简化 Comment

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
       {formateDate(props.date)}
      </div>
    </div>
  );
}

在线尝试

提取组件看起来枯燥无味,但是一版可复用组件在一个较大的应用中回报丰厚。 好的标准是一部分你的 UI 被多次应用(Button, Panel, Avatar), 或者它足够复杂(App, FeedStory, Comment), 成为一个可复用的组件是个好的选择。

Props 是只读的

不论你以函数还是类的方式声明一个组件,它必须从不修改它的 props. 思考许下 sum 函数:

function sum(a, b) {
  return a + b;
}

类似的函数被成为 “pure(纯)” ,因为他们不尝试修改他们的输入,而且他们根据相同的输入返回相同的输出。

相反, 下面这个函数就不是纯函数,因为它修改了自己的入参。

function withdraw(account, amount) {
  account.total -= amount;
}

React 相当灵活但是它有一个严格的规则: 所有 React 组件必须想一个纯函数一样对待它们的 props.

当然, 应用 UI 随时间动态改变。下一部分,介绍一个新概念 “state”. State 使得 React 组件可以在响应用户行为,网络请求或任何东西时随时间变化改变它们的输出,却不破坏这条规则。

最后

我有点分不清楚到底应该严格要求自己挤时间做,还是随意些。这个问题得好好思考一下。

原文链接:https://segmentfault.com/a/1190000015958766

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37689.html

文章标题:React docs Components and Props

相关文章
webpack入门+react环境配置
本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记 如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g creat...
2017-03-20
drag-and-drop实现图片浏览器预览
今天刚试过chrome的drag and drop API,它能非常简单的将本地的图片放到浏览器中进行预览。试想一下当我们把一个文图片拖拽到浏览器里会发生什么事情,你的浏览器试图打开一个新的页面并加载这个图片。现在我不想浏览器这样帮我处理图...
2017-03-27
一个适合新手的react小demo
之前一直都是在用vue,这两个月换了个公司,不过现在又离职了,这里什么框架都用, vue、angular、react,一般公司都是选二项技术去开发已经就够了, 要不是vue+angular或是react+angular个人觉得用了vue还来...
2018-01-11
超级给力的JavaScript的React框架入门教程
React 是 Facebook 里一群牛 X 的码农折腾出的牛X的框架。 实现了一个虚拟 DOM,用 DOM 的方式将需要的组件秒加,用不着的秒删。React 扮演着 MVC 结构中 V 的角色, 不过你要是 Flux 搭配使用, 你就有...
2017-03-27
Zepto triggerHandler
triggerHandler(event, [args]) ⇒ self 像 trigger,它只在当前元素上触发事件,但不冒泡。 $(&quot;input&quot;).triggerHandler(&#x27;focus&#x27...
2017-04-26
create-react-app配置多页应用
背景:最近接手一个混合app项目,但是其中的页面都是用jquery写的,有点乱,所以决定用react重构一下,因为涉及到很多页面,所以create-react-app只能自己配置成多页的了。弄这个也弄了挺久的,主要是对webpack的各个...
2018-01-10
Vuejs 组件——props数据传递的实例代码
本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#Props 本文是在官方文档的基础上,更加细致的说明,代码更多更全。 简单来说,更适合新手阅读 props数据传递 ①组件实例的作用域...
2017-03-13
Reactjs实现通用分页组件的实例代码
大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果: 注意这个组件需要ES6环境,最好使...
2017-03-01
使用AngularJS 应用访问 Android 手机的图片库
Download angularjs.zip - 4.5 KB 介绍 这篇文章来说明如何使用AngularJs调用android Apps暴露的REST APIS来访问图像库. 背景 Android和IOS 有很多远程访问的app,但是开发...
2017-03-21
React水印组件,支持图片水印,文字水印
React水印组件,支持图片水印,文字水印。 安装 npm i --save react-watermark-module 用法 import ReactWatermark from &#x27;react-watermark-modul...
2018-01-09
回到顶部