react 小书学习笔记-state/props

前言：迫于所有项目都要想 react 转移，开始初步的了解 react，由于以前已经学习了 react 的基础知识，今天了解一下 state 和 props 的概况。

针对对象：前端初学者，MVVM 框架初步了解者。

state props 概况

state 是组件保存，控制，修改自己的可变状态。
state 可以通过 props 来初始化自己的状态 state
props 主要作用是让使用该组件的父组件可以传入参数来配置该组件

使用情况

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

无状态组件（stateless）

没有 state 的组件叫作无状态组件（stateless component）
有 state 的组件叫作有状态组件（stateful component）

react.js 鼓励无状态组件在 0.14 版本引入函数式组件-----一种不能使用 state 组件

原来使用这样的方法

class HelloWorld extends Component {constructor() {super()}sayHi () {alert('Hello World')}render () {return (<div onClick={this.sayHi.bind(this)}>Hello World</div>)}
}
复制代码

函数式组件编写

const HelloWorld = (props) => {const sayHi = (event) => alert('Hello World')return (<div onClick={sayHi}>Hello World</div>)
}
复制代码

函数式组件就是一种只能接受 props 和提供 render 方法的类组件

鼓励使用无状态组件

因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。

我们更加希望把状态 `state` 留在上层数据

假设我们做一个评论的列表
- 评论列表：CommentApp
  - CommentInput（输入框） CommentList(列表展示你)
- 其中我么推荐把数据放在父级的 CommentApp 上，然后子级通过 props 来获取数据。
- 看下图

bad one
good one
better one
- 我们如果有公用的组件的话，跟好的方法是放在公用的父组件

参考

1、book : react 小书

2、react 官网

react 小书学习笔记-state/props相关推荐

西瓜书学习笔记第2章（模型评估与选择）
西瓜书学习笔记第2章(模型评估与选择) 2.1经验误差与过拟合 2.2评估方法 2.2.1留出法(hold-out) 2.2.2交叉验证法(cross validation) 2.2.3自助法(boo ...
DX11龙书学习笔记---渲染管线
DX11龙书学习笔记---渲染管线 1.输入装配阶段 - 顶点 - 图元拓扑 - 点列表 - 线带 - 线列表 - 三角形带 - 三角形列表 - 带有邻接信息的图元 - 控制点面片列表 - 索引 2. ...
西瓜书--学习笔记1
西瓜书–学习笔记1 第一章 1.分类和回归是监督学习的代表,而聚类是无监督学习的代表. 2.归纳和演绎是科学推理的两大基本手段. 归纳:从特殊到一般的"泛化"过程,即从具体的事实归 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
周志华西瓜书学习笔记(一)
周志华西瓜书学习笔记第一章绪论数据处理分为三个阶段:收集,分析,预测. 一.基本概念机器学习致力于研究如何通过计算的手段,利用经验来改善系统自身的性能. Mitchell给出的更形式化的定义为 ...
微信小程序学习笔记（七）----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
小程序学习笔记（1）
小程序学习笔记(1) 以下是学习期间记录的笔记: 10-18号晚上学习笔记: 小程序实际上是需要下载安装的,只是很小,用户基本上觉察不到组件是具有一定的功能的代码的集合移动端适配: 物理像素:是图 ...
jmh学习笔记-State共享对象
系列文章目录 jmh学习笔记-源代码编译与bench mode jmh学习笔记-State共享对象 jmh学习笔记-State共享对象前后置方法 jmh学习笔记-代码清除 jmh学习笔记-常量折叠 j ...

react 小书学习笔记-state/props

前言：迫于所有项目都要想 react 转移，开始初步的了解 react，由于以前已经学习了 react 的基础知识，今天了解一下 state 和 props 的概况。

针对对象：前端初学者，MVVM 框架初步了解者。

state props 概况

使用情况

无状态组件（stateless）

鼓励使用无状态组件

我们更加希望把状态 `state` 留在上层数据

参考

react 小书学习笔记-state/props相关推荐

最新文章

热门文章

react 小书学习笔记-state/props

前言：迫于所有项目都要想 react 转移，开始初步的了解 react，由于以前已经学习了 react 的基础知识，今天了解一下 state 和 props 的概况。

针对对象：前端初学者，MVVM 框架初步了解者。

state props 概况

使用情况

无状态组件 （stateless）

鼓励使用无状态组件

我们更加希望把状态 state 留在上层数据

参考

react 小书学习笔记-state/props相关推荐

最新文章

热门文章

无状态组件（stateless）

我们更加希望把状态 `state` 留在上层数据