[视频直播]本周日先行者视频“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而已