react基础

# react基础

##　讲课配置

~~~

在vue3.x框架基础上如何入门讲解react

  1:先将框架和js普通库的区别是什么

  2:框架之间当前共同点是什么？

  3:vue中哪些思想，在react中存在

  4:开始介绍react

  5:给学生30分钟，阅读文档。配置代码片段（目的为了检测，自己有框架基础上，对新框架的敏感度）

直接讲react如何上手？

1：react是什么?能做什么？与js有什么区别？

~~~

## react概念

~~~

 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库

 声明式：处理数据 react内部会自动构建用户界面

 命令式：通过dom-api 告诉浏览器改做什么？实现什么效果的编码方式

 用户界面： 视图层

~~~

## react 开始

- 下载安装react react-dom babel班级库

- 新建html

- 编写react代码

~~~html

 <!-- 设置app 为react 项目的根元素 -->

    <div id="app">

        <!-- <h1 id="title">hellwo word</h1> -->

    </div>

    <div id="count"></div>

    <!-- react 的核心库  -->

    <script src="./asstes/react16.4.js"></script>

    <script src="./asstes/react-dom.js"></script>

    <script>

        // 1:创建虚拟dom

        // React.createElement(TagetNmae,attrObjdect,child) 作用：创建虚拟dom

        let Vnode = React.createElement('h1',{id:'title'},'hellow word');

        // 2:将虚拟dom渲染到页面上

        //   ReactDOM.render(虚拟dom,真实跟标签dom) 作用：将虚拟dom渲染到真实dom上

        ReactDOM.render(Vnode,document.getElementById('app'));

 

        // 比较虚拟dom和真实的有什么区别；

        // 虚拟dom 中属性比真实dom属性少很多。

        console.log(Vnode);

        console.dir(document.getElementById('count'));

        // react 是如何通过操作虚拟dom 减少操作真实dom的次数？

~~~

## 问提示

### 检测对react 理解掌握

~~~

   如果不学react还能写代码码？

     

    1：传统的开发是由有模块化的概念？

        无，拆分问题，还有变量污染问题

    2：创痛js开发余浏览器dom有什么关系？？

        通过dom-API 将数据渲染到浏览器上

      2.1 开发步骤：

        1：获取数据，

        2：处理数据结构

        3：使用doma-api 将数据渲染到html上

       2.2 想一想假设交互复杂，是否需要频繁操作dom? 操作dom浏览器是否需要进行重排重绘？  

    3：传统js开发有【组件化】思想码？

       没有,

    4：传统js开发是否需要考虑兼容性问题

       需要。

    5：传统js是否需要考虑性能优化问题？

~~~

### 基础开发思路

~~~

   reatct 开思路：

    1：获取数据

    2：创建虚拟dom

    3: 渲染虚拟dom0 (react 完成的)

~~~