博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React.js 小书 Lesson12 - state vs props
阅读量:6324 次
发布时间:2019-06-22

本文共 1404 字,大约阅读时间需要 4 分钟。


React.js 小书 Lesson12 - state vs props

本文作者:

本文原文:

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

在线阅读:


我们来一个关于 stateprops 的总结。

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

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

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

如果你觉得还是搞不清 stateprops 的使用场景,那么请记住一个简单的规则:尽量少地用 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 来构建,一个子类就是一个组件。而用函数式的组件编写方式是一个函数就是一个组件,你可以和以前一样通过 <HellWorld /> 使用该组件。不同的是,函数式组件只能接受 props 而无法像跟类组件一样可以在 constructor 里面初始化 state。你可以理解函数式组件就是一种只能接受 props 和提供 render 方法的类组件。

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

下一节中我们将介绍。

你可能感兴趣的文章
实用干货:Kubernetes中的负载均衡全解
查看>>
usermod 命令、mkpasswd命令及用户密码管理
查看>>
Python学习,还在用正则或者bs4做爬虫吗?来试试css选择器吧
查看>>
Qt5开发及实例学习之标准字体对话框类QFontDialog:选择字体设置文本编辑器
查看>>
PhalApi-RabbitMQ基于PhalApi专业队列拓展
查看>>
C标签如何使用
查看>>
FreeBSD 11.1 pkg安装vim
查看>>
nagios pnp4nagios yum 安装 配置
查看>>
cacti相关资料网站
查看>>
Spring Boot 学习记录(一)——Spring Boot整合Mybatis
查看>>
Systemd 进程管理相关
查看>>
yum remove千万别乱用!!!
查看>>
android之调用webservice 实现图片上传
查看>>
Android新建项目,或者导入项目出现R文件丢失,解决方案 .
查看>>
[Unity3D插件]2dToolKit系列三 碰撞检测功能的实现以及障碍物的随机摆放
查看>>
社交系统ThinkSNS 老用户感恩回馈活动
查看>>
公网秘钥
查看>>
css多栏布局探讨1
查看>>
6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具
查看>>
LAMP环境搭建(centos6.9+apache2.4+mysql5.7+php7.1)
查看>>