第一个知识点,就是递归。
递归往简单了说,就是函数不断调用自身,同时设定一个退出条件,达成条件就结束调用自身,否则就成无限递归了。
看一小段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而已