7.6总结

1.声明式和编程式

        声明式:在声明式编程中，开发者通过定义问题的规则和约束，让计算机自主推导解决方案。(自动) eg:forEach,filter,map
        编程式:在编程式编程中，开发者需要详细描述如何执行任务，包括控制流程、算法、数据操作等。(手动)  eg:for循环

2.单项数据流概念

        上方数据改动会引发下面所有用到数据的改动，而下方数据改动不会影响上方

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

    双向数据流：

        一个数据更改，会默认引发其他数据的更改

3.react的文件结构

4.jsx概念

         a.jsx概念： javascript XML（HTML）的简写，表示在js代码中书写html结构

              作用： 在react中创建HTML结构（页面的UI结构）

              优势：采用类似与html结构的语法，降低学习成本

                         充分利用js的编程能力创建html结构

              注意：jsx不是标准的js语法，是js的扩展语法，所以浏览器不能直接识别，需要babel转换成浏览器识别的js，

              脚手架内置了babel@plugin-transform-react-jsx包

基本语法 

          b.jsx语法：

                    1）可以使用表达式  {js表达式}

                        表达式: 1） 数据类型 2）运算符 3)调用内置方法  str.split('').reverse().join('')

                    2) 不能执行语句(有过程) 循环语句 for  while do..while  判断语句 if...else  switch...case

                    3) 条件渲染：三元运算符或者逻辑与&&运算符

                               条件渲染 字符串  {num>100?'大于100':'小于100'}

                               条件渲染 标签或者组件 <div>{boo&&<MyButton></MyButton>}</div>

                               如果判断分支比较复杂，可以放置到专一的函数中处理复杂的分支

                    4) 循环渲染:通过map循环映射数组

                                {arr.map((item,index)=><li key={index}>{item}</li>)}

                                循环需要一个类型为number/string 不可重复的key值 为了diff算法性能，       

                    5）使模板尽量精简: 复杂的逻辑放置在函数中处理，在模板中只调用函数

                    6）样式处理

                               1） 行内样式  通过style属性

                               2) 类名控制样式   动态控制类名

                                          <p className={activeFlag?"active active1":'active1'} >active</p>

                    注意事项：

                      1. 必须需要根节点进行包裹，如果没有根节点 可以用<></>

                      2. 所有标签都要闭合

                      3. jsx类似于js语法，所有的属性或者属性值需要驼峰式写法

                      4. jsx支持多行，需要用（）包裹

                      jsx中写的HTML结构最终生成js对象，本质是       React.createElement(component,prop,...children)的语法糖

 5.key值注意事项：

        1）key只会显示在虚拟dom内部，不会渲染到真实的dom中，用来进行react循环的性能优化

        2）循环需要一个类型为不可重复的key值 为了diff算法性能

        3）数据列表中的id可以作为key值

        4） 如果没有id，则可以产生index作为key值

6.JSX是什么，它和JS有什么区别

        JSX是react的语法糖，它允许在js中书写html结构，它不能被浏览器直接识别，需要通过webpack、babel之类的编译工具转换为JS执行

JSX与JS的区别：
        JS可以被打包工具直接编译，不需要额外转换，jsx需要通过babel编译，它是React.createElement的语法糖，使用jsx等价于React.createElement
jsx是js的语法扩展，允许在js中书写html；JS是原生写法，需要通过script标签引入

 7.react的理解

        React 是一个构建用户界面javascript的库，和vue、angular并称前端的三大框架。react引领了很多新思想，世界范围内是最流行的js前端框架。

8.为什么学习react

1. 原生js操作dom比较繁琐、效率低
2. 使用原生js操作dom，浏览器会进行大量的重绘重排
3. 原生js没有组件化的概念，导致代码复用率比较低

9.react的特点

1. 声明式UI −React采用声明范式，可以轻松描述应用。
2. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
3. 使用react native可以跨平台
4. 高效 -使用虚拟dom+优秀的diffing算法，减少与dom的交互。
5. 灵活 −React可以与已知的库或框架很好地配合。
6. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
7. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。