React 第十二章 React思想

本章将介绍一下在接到需求时，怎么使用React去实现它，通过实现过程我们来理解React的一些设计思想。

比如我们现在要实现这样一个微信的收藏界面

1，首先第一步需要根据界面功能进行划分组件。

根据界面结构我们将其整体对外红色区域封装为一个组件 WeiChatWindow,其内部分为左侧的工具栏Toolbar，右侧黄色部分为内容面板ContentPanel,内容面板又分为收藏类别FavoriteType以及右边收藏内容列表ContentList.如此我们的class结构基本已经可以确定了

WeiChatWindow|--Toolbar|--ContentPanel|--FavoriteType|--ContentList

2，根据划分的组件进行组件界面开发。

开发组件可以根据复杂程度自己决定，如果页面太复杂的话，可以从内往外开发。把小的组件一点点组装成大的。

3，确定哪些数据使用state，哪些使用props。原则使用最少的state来控制组件。

通过问自己以下三个问题，你可以逐个检查相应数据是否属于 state：

该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。

从上面界面我们可以看到收藏的筛选类型以及关键词可能跟随用户在不同时间可能做不同的选择修改，所以关键词和收藏类型应为state。而收藏列表内容是通过接口获取。收藏内容列表我们可以通过在父组件中调用后台将结果通过props传递给内容列表ContentList。当然我们也可以将内容列表数据放在内容列表组件中使用state存储。

4，确定state的存在组件的位置

另我们需要确定他在那个组件中使用，从图中我们可以看出最右侧的内容列表ContentList中的数据由类型和关键词通过后台接口查询获得。所以state不仅仅是在ContentList 以及FavoriteType都存在使用，所以我们将其存在他们共有的最近父组件中即ContentPanel组件中则比较合适。

5，添加交互

使FavoriteType中输入的关键词以及收藏类型的值通过自身改变事件调用父组件通过props传入的回调函数去向上逆向传递。在ContentPanel中获取收藏列表数据传递收藏列表，或者将关键词和类型传递给内容列表组件，内容列表组件内部查询展示列表数据。

如上：主要介绍了如何去根据页面去一步步实现页面功能。其中概括分为确定组件边界、确定组件的state、props、如何添加交进行联动。

React 第十二章 React思想相关推荐

第十二章_网络搭建及训练
文章目录第十二章网络搭建及训练 CNN训练注意事项第十二章 TensorFlow.pytorch和caffe介绍 12.1 TensorFlow 12.1.1 TensorFlow是什么? 12 ...
MLAPP————第十二章隐线性模型
第十二章隐线性模型 12.1 要素分析(factor analysis) 在我们之前提到的混合模型中,数据的生成都是由某个隐状态控制的,然后是那个隐状态控制的分布生成的,但是这样的模型在表示上还是具 ...
《汇编语言》王爽(第四版) 第十二章实验12
文章目录前言一.思路分析 1.安装 2.设置中断向量 3.do0程序 4.测试 5.优化二.最终成果 1.完整代码 2.效果图总结前言本文是王爽老师<汇编语言>(第四版) 第十 ...
【软考软件评测师】第二十二章法律法规专题
[软考软件评测师]第二十二章法律法规专题第二十二章法律法规专题 [软考软件评测师]第二十二章法律法规专题第一部分知识点集锦 1.著作权法 1)保护期限 2)构成法律 3)保护客体 4)著作 ...
PRML读书会第十二章 Continuous Latent Variables（PCA，PPCA，核PCA，Autoencoder，非线性流形)
主讲人戴玮 (新浪微博:@戴玮_CASIA) Wilbur_中博(1954123) 20:00:49 我今天讲PRML的第十二章,连续隐变量.既然有连续隐变量,一定也有离散隐变量,那么离散隐变量是什 ...
【正点原子FPGA连载】第三十二章基于lwip的TCP服务器性能测试实验摘自【正点原子】DFZU2EG_4EV MPSoC之嵌入式Vitis开发指南
第三十二章基于lwip的TCP服务器性能测试实验上一章的lwip Echo Server实验让我们对lwip有一个基本的了解,而Echo Server是基于TCP协议的.TCP协议是为了在不可靠的互 ...
matlab rotatefactors,第十二章-matlab--因子分析.docx
第十二章因子分析(贵州大学杨虎统计) 引出因子分析的定义:作个比喻,对面来了一群女生,我们一眼就能够分辨出孰美孰丑,这是判别分析:并且我们的脑海中会迅速的将这群女生分为两类:美的一类,丑的一类, ...
Netty In Action中文版 - 第十二章：SPDY
Netty In Action中文版 - 第十二章:SPDY 本章我将不会直接翻译Netty In Action书中的原文,感觉原书中本章讲的很多废话,我翻译起来也吃力.所以,本章内容我会根据其他资料 ...
读书笔记-《ON JAVA 中文版》-摘要12[第十二章集合]
文章目录第十二章集合 1. 泛型和类型安全的集合 2. 基本概念 3. 添加元素组 4. 集合的打印 5. 列表List 6. 迭代器Iterators 6.1 Iterators 6.2 Lis ...

React 第十二章 React思想

React 第十二章 React思想相关推荐

最新文章

热门文章