react知识梳理

react基础知识

1.react的基本概念

React是Facebook开发出的一款JS库 Facebook认为MVC无法满足他们的扩展需求

特点
1.react不使用模板
2.react 不是一个MVC框架
3.响应式
4. react是一个轻量级的js库

原理

虚拟DOM react把DOM抽象成为一个JS对象
diff算法

1.虚拟DOM确保只对界面上真正发生变化的部分进行实际的DOM操作
2.逐层次的来进行节点的比较

react 历史轴
2013

2.react 开发环境的搭建

1.react.js 核心文件
2.react-dom.js 渲染页面中的DOM 当前文件依赖于react核心文件或者(react-native)
3.babel.js ES6转换成ES5 JSX语法转换成javascript 现今浏览器进行代码的兼容

下载
react 核心包 npm i react --save
react-dom npm i react-dom --save
babel npm i babel-standalone --save

3.jsx基本使用

        // 1.注释  /**/
        let MyDom=<div>
                    {/*我是需要注释的内容*/}
                    hello
                  </div>
        ReactDOM.render(MyDom,document.getElementById("demoReact"))

4.jsx进阶使用

使用表达式
渲染数组
属性设置
// 注意在jsx 不能使用class 这个属性 因为class是js的关键字 className
jsx独立文件

5.react列表渲染

map()

6.react遍历对象

        let obj={
            name:"xixi",age:18,sex:"男"
        }
        let myDom=<div>
                { Object.keys(obj).map((v,i)=>{
                     return <p>便利的属性是：{v}-------便利出来的值是:{obj[v]}</p>
                 })}
            </div>
        
            ReactDOM.render(myDom,document.getElementById("demoReact"));

7.面向组件编程基础

组件到底是什么？
高耦合低内聚
高耦合就是吧逻辑紧密的内容放在一个组件当中 低内聚吧不同组件的依赖关系尽量弱化 每个组件眼尽可能的独立起来

组件当中的重要内容
1.构建方式
2.组件的属性
3.生命周期

演变过程 传统的组件有几个明显的特点 1，简单的封装 2 简单的生命周期的呈现 3.明显的数据流动 当一个项目比较
复杂的时候 传统的组件化根本不能很好的把结构样式和行为结合 让项目很难以维护

react的组件分为3个部分 1 属性props 2 状态 state 3 生命周期

react的组件 是一个非常重要的概念 通过组件可以吧页面中的ui部分切分成 独立 高复用性的部件 让每个开发者更加专注于
一个个独立的部件

组件与组件化
组件 就是用实现页面局部功能的代码集合 简化页面的复杂程度 提高运行效率
组件化 当前程序都是使用组件完成的 那么就是一个组件话的应用

组件的创建
1.函数组件/无状态组件
2.类组件
1.

            // 无状态组件的创建方式