react详细介绍_初始概念

React深度解析：定义、组件化与实践

最新推荐文章于 2023-03-23 20:10:39 发布

原创最新推荐文章于 2023-03-23 20:10:39 发布 · 435 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了React的基本概念，包括其作为JavaScript库的角色，由Facebook官方维护的事实，以及它在移动App开发中的应用。文章还探讨了React与Vue的对比，组件化的优点，以及React在知名公司的应用。重点讲解了React的diff算法，jsx的使用规则，以及创建虚拟DOM的方法。最后，提到了React项目的初始化和常用库的安装。

react官网：https://react.docschina.org/

react的定义

用于构建用户界面的 JavaScript 库
React 不是一个 MVC 框架，仅仅是视图（V）层的库

开发团队方面

React是由FaceBook前端官方团队进行维护和更新的，因此react技术团队实例比较雄厚
Vue 第一版主要作业者是尤雨溪专门维护的，当Vue更新到2之后又一个一尤玉溪为首的团队在维护。

移动Appk开发体验方面

Vue结合Weex这门技术，提供了迁移到移动端App开发的体验
React 结合ReactNative,也提供了无缝迁移到移动App的开发体验（RN用的最火）

前端三大主流框架

Angular.js：出来的比较早前端框架,学习曲线比较陡,NG1学习比较麻烦,之后进行一系列改革,同时也提供了组件开发的概念,从NG2开始，也支持ts(TypeScript)
Vue,js:(最火)关注的人最多的一门前端框架，他是中国人尤玉溪开发的，对于我们来说相对友好一点。
React.js：最流行,用的人也是最多的一个框架，因为他的设计很优秀

React和Vue的对比

组件方面
1.什么是模块化：是从代码的角度老进行分析，把一些可用的代码，抽离位单个模块
2,什么是组件化:是从UI界面的角度来进行分析的，把一些可服用的U元素,抽离位单独的组件，便于项目的开发和维护
3.组件的好处：随着项目的增大，手里的组件越来越多很方便的把现有的组件拼接位一个完整的页面。
4.Vue如何实现组件化：通过.vue文件，来创建对应的组件。

template结构 script行为 style样式

使用react的公司

Facebook  instagram  Netflix  纽约时报  雅虎  WhatsApp Codecademy Dropbox Aribnb   Asana  微软

diff介绍

创建虚拟dom,并且渲染到页面上

虚拟dom的定义：虚拟dom 是描述dom节点的js对象来进行。
diff 算法：计算最小差异，局部更新dom
react元素：通过createElement创建出来的就是react元素

jsx
。是javascript表达式，可以使用babel转换
。是js的一个方法
。标签必须成对出现，单标签必须严格闭合
。语法跟html非常相似
。符合xml规范的JS语法
。并不是直接把jsx渲染到页面，而是内部通过babel转换成createElement形式再渲染
。注释 {/**/}
。用className添加class类名
。htmlFor替换label中的for属性
.。jsx运行更快，在编译js代码后进行了优化，更加简单快捷，安全。
规则
。一个react元素必须要有一个根节点
。遇见<>解析html模板，遇见</>解析结束
。遇见{开始解析js,遇见}js解析结束
语法：<div className='name'></div> || <input value={1+2} />
生成虚拟dom

function createElement(tag, props, children) {
    return {
        tag,
        props: {...props},
        children: [...children]
    }
}
let p = createElement("p", {
    class: "p"
}, ["自信"])
let createEle = createElement("div", {
    id: "wrap",
    class: "wrap",
    style: {
      width: "100",
       height: "100",
       background: "cornflowerblue"
   }
}, ["1701B",p])

react.createElement接受参数

React.createElement(string/function,reactClass,props,children)

ReactDOM 虚拟dom变为真实的dom节点

ReactDOM.render(vnode,rootdom)

下包
。npm i -g create-react-app
。create-react-app name
。cd name
。npm start
。npm run eject
。npm i --save react-router-dom
。npm i --save react-loabable
。npm i --save prop-types
。npm i --save redux
。npm i --save redux-logger
。npm i --save redux-thunk
。npm i --save react-redux
。npm i --save mockjs
。npm i --save axios
。npm i --save better-scroll
。npm i --save swiper
。npm i --save antd

react基本使用

1.新建index.html,引入react,react-dom两个js文件

react:专门用于创建组建和虚拟dom,同时组建的生命周期都在这个包里React.Element
react-dom：专门进行dom操作,最主要的应用场景,就是ReactDOM.render()
jsx也可以创建虚拟dom
for也是关键字需要htmlFor代替,就是label里面的for和input里面的id关联。

jsx使用规则

想要在js文件里面解析html,需要下载babel来编译jsx(text/javascript)
所有的节点都必须有一个根元素包裹。
jsx引式调用了createElement();
虚拟dom的创建
真实dom的原理代码

<body>
    <!-- <div class="box" id="wrap">
        今天是周日
        <p>北京</p>
        
    </div> -->
    <div id="root"></div>
    <script>
        let oP = createElement('p', {
            'class': 'list'
        }, ["北京"])
        let oDiv = createElement("div", {
            class: "box",
            id: "wrap",
            style: {
                width: "140px",
                height: "140px",
                background: "deepskyblue"
            },
        }, ["今天是周日", oP]);
        //  console.log(oDiv)
        function createElement(tag, props, children) {
            return {
                tag,
                props: {...props
                },
                children: [...children],
            }
        }
        //把虚拟dom转化成真实的dom,并且把它渲染到页面上
        render(oDiv, document.getElementById("root"));

        function render(vTree, root) {
            //  console.log(vTree, root); //这里打印出来的是里面的属性和获取到的root节点
            let target1 = createDom(vTree);
            root.appendChild(target1);
            //   把虚拟dom转化成真实的dom,
            function createDom(vTree) {
                let {
                    tag,
                    props,
                    children
                } = vTree;
                //  console.log(tag, props, children);
                //创建节点
                let targetDom = document.createElement(tag);
                // console.log(targetDom)
                // 添加属性 
                // setAttribute(key, value)
                // console.log(Object.entries(props)) //解构出来是一个二维数组，所以需要遍历
                Object.entries(props).forEach(item => {
                    let [key, value] = item;
                    // console.log(key, value)
                    if (typeof value == "object") {
                        value = Object.entries(value).map(item => item[0] + ":" +        item[1]).join(";")
                    }
                    targetDom.setAttribute(key, value)
                })
                //添加子节点
                if (children) {
                    children.forEach(item => {
                        console.log(item) //p标签
                        let targetText = typeof item == 'string' ? document.createTextNode(item) : targetDom.appendChild(createDom(item));
                        targetDom.appendChild(targetText);
                    })
                }
                return targetDom;
            }
        }
    </script>
</body>