如何编写一个React组件

sPeng 发布于2019-08-23 11:54 / 2914人阅读

摘要：例如下面的代码组件生命周期钩子函数在组件挂载完成后立即被调用组件挂载完成渲染结果以上就是一个常规的组件编写方式，不过我们还可以通过观察上面的代码，发现几个有趣的地方中有一个函数是组件生命周期钩子函数。

如何编写一个React组件

在React的世界里，通常是用class来声明一个组件的，它必须继承自React.Component。
例如下面的代码：

// MyFirstComponent.jsx
class MyFirstComponent extends React.Component {
  state = {
    text: "Hello React"
  };

  /** 组件生命周期钩子函数：在组件挂载完成后立即被调用 */
  componentDidMount() {
    alert("组件挂载完成！");
  }

  render() {
    return (
      {this.state.text}, I am {this.props.author}!
    )
  }
}

export default MyFirstComponent;

// index.js
import MyFirstComponent from "MyFirstComponent";

/** 渲染结果：Hello React, I am Shaye! */
ReactDOM.render(, document.getElementById("app"));

以上就是一个常规的React组件编写方式，不过我们还可以通过观察上面的代码，发现几个有趣的地方：

MyFirstComponent中有一个函数componentDidMount是组件生命周期钩子函数。实际上React为组件设计了一系列的生命周期钩子函数

MyFirstComponent中有一个特别的函数render()，这个函数把类似html的模板内容jsx作为返回值。这是一个必须定义的函数，否则React将抛出错误

jsx乍看之下像是一种模板引擎，实际上是一种JavaScript的语法扩展，它的核心理念就是著名的all in js，它完全是在JavaScript内部实现的，它和传统的模板引擎一样，也可以绑定js表达式

jsx绑定的数据可以很明显地看出来自两个对象：this.state和this.props；this.state是MyFirstComponent内部自定义的组件状态；this.props是外部凭借标签属性的形式传进MyFirstComponent内部的数据，类似于函数的传参；

总结来说，当你掌握了 组件生命周期 JSX 组件状态state 组件属性props ，你就知道该如何编写React组件了。

组件生命周期

官方文档已经有非常详尽的介绍，这里不再赘述，请点击这里查看组件生命周期的官方文档。

JSX

你可以任意地在JSX当中使用javaScript表达式，在JSX当中的表达式要包含在大括号里。
例如下面的代码：

{this.state.content} forever

JSX里的React元素，比如div，最终都会被编译器转译，被某些特定函数处理变成一个轻量的javascript object。比如上面提到的元素div最终会变成如下的object：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const divElement = {
  type: "div",
  props: {
    // this.state.clname的值
    className: "love",
    style: {
      fontSize: "20px"
    },
    // "you"为this.state.content的值
    children: ["you", "forever"]
  }
}

React就是通过读取这些对象来操作DOM并保持数据内容一致。所以，实际上你依然在写js。所以，class和style必须使用在js中的写法
比如:class => className
再比如：font-size: 20px; => { fontSize: "20px" }

特别地，React元素的属性仍然可以像原生html一样使用引号来定义以字符串为值的属性，例如：className="my-claname"

除了以上所提，JSX的事件绑定与原生html也有一些语法上的不同：

React的事件命名采用驼峰式写法，而不是小写。

React事件绑定的必须是一个函数对象，不能是字符串。

代码示例：

我是一个按钮

// 也可以向事件回调函数传递参数
 this.handleClick(params)}>我是一个按钮

组件状态state

state是私有的，完全受控于当前组件。既然是状态，那么就会有更新的需求，如何更新呢？
代码示例：

// 对`this.state`或者它的属性直接`=`赋值，将永远不会触发组件渲染，必须使用`setState()`

// 在组件的生命周期钩子函数中调用this.setState()
componentDidMount() {
  this.setState({
    content: "lalalala"
  })
}

// 在组件的自定义函数中调用this.setState()
handleClick = () => {
  this.setState({
    content: "uauauaua"
  })
}

setState()是React中唯一一个动态更新组件的途径，当它被调用之后，自身组件以它的所有子组件都将触发重渲染
特别地，state同样也可以作为属性传递给子组件；
setState()详细文档

组件属性props

props是父组件传递下来的数据，一般是来自父组件的state或者组件的其他成员变量。并且，props是只读的，组件永远无法修改自己的props。只有在父组件调用setState()之后才能使子组件的属性发生变化并重新渲染。
props只能从上往下传，组件也只能修改自身私有的state，意味着整个应用的数据流只能是自上往下的单向数据流

总结

组件生命周期 JSX 组件状态state 组件属性props 再加上一个自上而下的单向数据流，这些便是React组件最基本的特点了吧！

GPU云服务器云服务器导出数据编写一个方法简单编写一个html 怎样编写一个小程序 react如何部署到云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97638.html

React组件编写思路（一）

摘要：受控组件例假设有一个方法非受控组件例接下来我们来看下如果编写这两种组件，打个比方我们要自定义一个组件。于是修改后的代码如下确定使用这个组件的代码以上就是两种组件的编写思路，你可以选择把你的组件编写成任意一种，那么使用者使用时也会有所不同。新手写 React 组件往往无从入手，怎么写，什么时候用 props，什么时候用 state 摸不着头脑。其实是没有了解到 React 的一些思想。...

CollinPeng 2019-08-20 16:30 评论0 收藏0
可靠React组件设计的7个准则之组合和复用

摘要：幸运的是，组合易于理解。组件的组合是自然而然的。高效用户界面可组合的层次结构，因此，组件的组合是一种构建用户界面的有效的方式。这个原则建议避免重复。只有一个组件符合单一责任原则并且具有合理的封装时，它是可复用的。翻译：刘小夕原文链接：https://dmitripavlutin.com/7-... 原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和...

Amos 2019-08-26 10:43 评论0 收藏0
JavaScript 是如何工作的：编写自己的 Web 开发框架 + React 及其虚拟 DOM

摘要：与大多数全局对象不同，没有构造函数。为什么要设计更加有用的返回值早期写法写法函数式操作早期写法写法可变参数形式的构造函数一般写法写法当然还有很多，大家可以自行到上查看什么是代理设计模式代理模式，为其他对象提供一种代理以控制对这个对象的访问。这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇。如果你错过了前面的章节，可以在这里找到它们：想阅读更多优质文章请...

余学文 2019-08-26 13:30 评论0 收藏0
【全栈React】第1天: 什么是 React?

摘要：本文转载自众成翻译译者链接原文今天，我们从一开始就开始。让我们看看是什么，是什么让运转起来。什么是是一个用于构建用户界面的库。它是应用程序的视图层。所有应用程序的核心是组件。组件是可组合的。虚拟完全存在于内存中，并且是网络浏览器的的表示。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3765原文：https://www.ful...

ralap 2019-08-20 18:29 评论0 收藏0
React Hooks入门

摘要：组件的职责增长并变得不可分割。是架构的重要组成部分。有许多好处，但它们为初学者创造了入门的障碍。方法使用状态钩子的最好方法是对其进行解构并设置原始值。第一个参数将用于存储状态，第二个参数用于更新状态。学习目标在本文结束时，您将能够回答以下问题：什么是 hooks? 如何使用hooks？使用hooks的一些规则? 什么是custom hook(自定义钩子)？什么时候应该使用 ...

zhangke3016 2019-08-02 15:17 评论0 收藏0