[视频直播]本周日先行者视频“React多级菜单

第一个知识点,就是递归。

递归往简单了说,就是函数不断调用自身,同时设定一个退出条件,达成条件就结束调用自身,否则就成无限递归了。

看一小段JSON:

{
   "subMenu": [
       {
           "name": "菜单一",
           "subMenu": [
                {
                    "name": "菜单1/1",
                    "subMenu": [
                        {
                            "name":"菜单1/1/1",
                            "url":"xxx"
                        },
……

然后用JS就这样递归处理:

function createLi( d, _this ){
         for…(){
                   if('subMenu' in _data.subMenu[i] ){
                            ….
                            createLi( _data.subMenu[i],liThis );
                   }else {
                            return_data.subMenu[i].name;
}
…

这里面最重要的就是在于for循环中的if判断,它就是退出递归的条件。

第二个知识点,React生命周期简介。

生命周期,这个词看上去挺唬人的,其实就是什么时候生成,什么开始调用,什么时候停止调用,调用的时候做什么事,调用之前干什么,调用之后干什么。而已,其实都是一些状态,所以有人说React整个就是个状态机。

从它的概念来讲,生命周期分为三个阶段,实例化,存在期,销毁期。我们用的最多的就是实例化,这个阶段主要控制组件的构建、展示,根据以下的五个步骤来控制组件的展示和逻辑控制。

现在主要讲一下组件实例化的五个步骤:

getDefaultProps:顾名思义,这里会初始化一些默认的属性,通常会将固定的内容放在这个过程中进行初始化和赋值,一个控件可以利用this.props获取在这里初始化它的属性,由于组件初始化后,这个方法就不会再调用了。所以组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改。

getInitialState:这里是对控件的一些状态进行初始化,由于该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值,修改方式如下:

1. function() {  
2.  this.setState({  
3.         showText: 'Hello' 
4.     });  
5. }  

值得注意的是,一旦调用了this.setState方法,控件必将调用render方法,对控件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。

componentWillMount:可以通过字面意思看出,这个方法被调用时期是组件将要被加载在视图上之前,功能比较少,即:render一个组件前最后一次修改state的机会。

render:是一个组件必须有的方法,是一个函数,并返回JSX或其他组件来构成DOM

componentDidMount:即调用了render方法后,组件加载成功并被成功渲染出来以后所执行的回调函数

第三个知识点,就是JSON格式和UI的对应关系。

在UI设计图上,有右箭头的,必然是存在于下一级菜单。

而多级菜单则会根据JSON的每一节点是否存在subMenu来判断是否有子菜单存在。那么这个subMenu就可以理解为UI设计图上的下拉箭头。

菜单的存在是一级一级的,在JSON的设计上,可以这样,

先从下到下,写出第一列JSON;然后在它的某一行的右边写出第二列JSON;然后再在第二列的某一行的右边写出第三列JSON。

这样我们就有了三级。。。N级的数据层级,而这些层级之间以什么连接呢?就是subMenu,有右箭头的地方就有subMenu。然后再按着JSON的结构,加上相应的数组括号和对象括号,这样一个根据UI设计图有对应关系的JSON的结构就设计出来了。

根据这个结构再来回看递归多级菜单,就更简单了,无非是不断的循环每一级的JSON,判断是否存在subMenu而已

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-11-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart 4.0 高级-结构指令 顶

本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己的结构指令来完成相同的操作。

1392
来自专栏码生

React Native 大纲

843
来自专栏Golang语言社区

厚土Go学习笔记 | 19. slice和数组很像,但是slice可以添加元素

slice中文可以称为“切片”。是Go语言为处理同类型数据序列提供的一个高效且方便的方式。是在数组上抽象的一个数据类型。 切片的使用相当的广泛。 切片可以直接赋...

3897
来自专栏柠檬先生

Angularjs基础(十一)

ng-csp       描述:修改内容的安全策略       实例: 修改AngularJS 中关于"eval"的行为方式及内联样式;         ...

2665
来自专栏iOSer成长记录

iOS-自定义TextField(解决输入限制,键盘弹出问题)

1482
来自专栏向治洪

深入理解React Native页面构建渲染原理

前言 React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。 基本概念解释 React 是...

4149
来自专栏向治洪

深入理解React Native页面构建渲染原理

前言 React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。 基本概念解释 React 是...

74410
来自专栏ytkah

{dede:list}和{dede:arclist}的区别

1.{dede:list}是用于列表页的文章列表调用,通常是用于list_article.htm页面,这个文章列表是可以分页的。 功能说明:表示列表模板里的分...

3616
来自专栏吴裕超

认识createDocumentFragment

今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。 DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的...

2757
来自专栏从零开始学自动化测试

python爬虫beautifulsoup4系列1

前言 以博客园为例,爬取我的博客上首页的发布时间、标题、摘要,本篇先小试牛刀,先了解下它的强大之处,后面讲beautifulsoup4的详细功能。 一、安装...

38211

扫码关注云+社区

领取腾讯云代金券