React框架的自我整理和精简(三)

    一、事件处理
(1)React相关命名方式和调用方法的方式:采用小驼峰式命名法。而不是纯小写。使用
JSX语法时候传入一个函数。
(2)阻止React中的事件处理：不是return false.而是通过preventDefault.
(3)如何正确的传值和调用class方法：用this.handleClick.bind(this);或者使用箭头函数。

    二、条件渲染
(1)React中无法像Angualr中的ng-for和ng-if那样，将条件渲染相关问题，更多的是
通过自行组合处理。
(2)在实际操作中的方式：更多的是利用JSX中的变量可以等于一个节点的特性。在return
变量值根据条件赋值相应的节点。 最后retern相应的节点即可。还有一种方式是，
使用ES6相关特性，完成&&短路方式编写相应的函数。即JSX的概念：ui和相关的逻辑
是密切关联的。
(3)如何阻止某个组件的渲染: 有些情况，需要让某个组件在相应条件下，不执行渲染。
可以通过render一个null值。
(4)三目语句在实际情况中的使用:  三目语句根据条件渲染，很多时候需要使用到ES6中的
模板字符串. '${}'可以在{}中计算任意的Javascript的字符串表达式。 如果结果不是字符串
结果最后会被转换为字符串。  比如多个class的条件的判断的时候。
    三、在react中如何实现多重遍历渲染多个节点
(1)多个样式类似的组件如何拼接渲染：比如在React中实现条件轮播的功能。当时主要
思考的问题是在JSX中每个变量都可以代表一个节点。那么这些节点是否可以拼接起来
，最后渲染拼接完成后的节点。实际上也是这样的,在React这种操作称为列表渲染，
(2)如何进行列表渲染：在React中通过map(()=>{})的方式可以将多个节点按条件拼接。
但是需要在相应的key值中标明唯一值。
(3)map中的key作用是什么:我理解的是为了标识拼接的对应节点，对比是否一一对应，
减少这个过程需要对比的值。只需要比较key值即可。因此这个key值的标识必须放在
被拼接的节点上面。否则就起不到相应的作用。
(4)多重渲染的map应该放在哪个位置上面:首先因为JSX的特点可以放在return上面，
但是考虑到组件的拼接性，个人觉得尽可能放在提取出来放在组件或者变量的逻辑中。
同时考虑到函数是一等公名的前提下，更加方便测试接下来可能出现的问题的位置

                    <div className="nameMark">
                        <div className="nameMarkAll">
                            <ChangeCircle shuliang={this.props.files} index={this.state.index} />
                        </div>
                    </div>
                </div>
            </Modal>
        </React.Fragment>
    }
}
class ChangeCircle extends React.Component {
    render() {
        var i = 1;
        var listItems = (this.props.shuliang).map((number, key) => <span className="circular" key={++i}>
            <label className={`circularType ${(i == this.props.index + 2) ? 'circularTypeChange' : null}`} ></label>
        </span>);
        return <React.Fragment>{listItems}</React.Fragment>;
    }
}