React.js 小书 Lesson12 - state vs props

call_me_R 发布于2019-08-21 17:33 / 2557人阅读

摘要：的主要作用是用于组件保存控制修改自己的可变状态。它们都可以决定组件的行为和显示形态。但是它们的职责其实非常明晰分明是让组件控制自己的状态，是让外部对组件自己进行配置。下一节中我们将介绍小书渲染列表数据。

React.js 小书 Lesson12 - state vs props

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson12

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

我们来一个关于 state 和 props 的总结。

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

state 和 props 有着千丝万缕的关系。它们都可以决定组件的行为和显示形态。一个组件的 state 中的数据可以通过 props 传给子组件，一个组件可以使用外部传入的 props 来初始化自己的 state。但是它们的职责其实非常明晰分明：state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。

如果你觉得还是搞不清 state 和 props 的使用场景，那么请记住一个简单的规则：尽量少地用 state，尽量多地用 props。

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。前端应用状态管理是一个复杂的问题，我们后续会继续讨论。

React.js 非常鼓励无状态组件，在 0.14 版本引入了函数式组件——一种定义不能使用 state 组件，例如一个原来这样写的组件：

class HelloWorld extends Component {
  constructor() {
    super()
  }

  sayHi () {
    alert("Hello World")
  }

  render () {
    return (
      Hello World
    )
  }
}

用函数式组件的编写方式就是：

const HelloWorld = (props) => {
  const sayHi = (event) => alert("Hello World")
  return (
    Hello World
  )
}

以前一个组件是通过继承 Component 来构建，一个子类就是一个组件。而用函数式的组件编写方式是一个函数就是一个组件，你可以和以前一样通过使用该组件。不同的是，函数式组件只能接受 props 而无法像跟类组件一样可以在 constructor 里面初始化 state。你可以理解函数式组件就是一种只能接受 props 和提供 render 方法的类组件。

但本书全书不采用这种函数式的方式来编写组件，统一通过继承 Component 来构建组件。

下一节中我们将介绍《React.js 小书 Lesson13 - 渲染列表数据》。

GPU云服务器云服务器 React.js react.js cdn 小书 Lesson

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

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

写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
React.js 小书 Lesson11 - 配置组件的 props

摘要：默认配置上面的组件默认配置我们是通过操作符来实现。但这并不意味着由决定的显示形态不能被修改。组件可以在内部通过获取到配置参数，组件可以根据的不同来确定自己的显示形态，达到可配置的效果。下一节中我们将介绍小书。 React.js 小书 Lesson11 - 配置组件的 props 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesso...

xiangzhihong 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类

摘要：最后抽离出来了一个类，可以帮助我们更好的做组件化。一个组件有自己的显示形态上面的结构和内容行为，组件的显示形态和行为可以由数据状态和配置参数共同决定。接下来我们开始正式进入主题，开始正式介绍。下一节链接直达小书基本环境安装 React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 评论0 收藏0
React.js 小书 Lesson16 - 实战分析：评论功能（三）

摘要：但是给传递的评论数据并没有传递给，所以现在发表评论时没有反应的。包括实现功能之前先理解分析需求，划分组件。到此为止，小书的第一阶段已经结束，你可以利用这些知识点来构建简单的功能模块了。 React.js 小书 Lesson16 - 实战分析：评论功能（三）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson16 转载请注明出处...

Gilbertat 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson15 - 实战分析：评论功能（二）

摘要：例如，上面设置了的为，在中被初始化为空字符串。如何向传递的数据父组件只需要通过给子组件传入一个回调函数。当用户点击发布按钮的时候，调用中的回调函数并且将传入该函数即可。下一节中我们将介绍小书实战分析评论功能三。 React.js 小书 Lesson15 - 实战分析：评论功能（二）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/les...

siberiawolf 2019-08-21 17:34 评论0 收藏0