react基础篇（一）

最新推荐文章于 2024-07-24 10:16:18 发布

气泡水去水

最新推荐文章于 2024-07-24 10:16:18 发布

阅读量196

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/zz_zz33/article/details/129541954

版权

本文介绍了React的基本概念，包括其作为JavaScript库的角色，虚拟DOM的作用以及如何减少DOM操作提高效率。详细讲述了React的初次使用步骤，JS与JSX的对比，以及如何使用函数式和类式组件来构建应用。还提到了在Chrome中安装ReactDevTools来辅助开发。

摘要由CSDN通过智能技术生成

在谷歌浏览器里安装react-dev-tools工具，可以观察运用的组件

使用函数式组件

使用类式组件

react简介

是一个将数据渲染为html视图的开源js库

react在组件中写内联样式要用双花括号，例：<h2 style={{color:red}}></h2>

相对于js解决的问题：
- 原生js操作dom繁琐，效率低（dom-api操作ui）
- 使用js直接操作dom，浏览器会进行大量的重绘重排
- 原生js没有组件化编码方案，代码复用率低
react特点
- 学完react基础，可以进行react-native的学习，可以使用react语法进行安卓，iOS的开发
- 和vue类似，使用虚拟dom优秀的diff算法，减少与真实dom的交互

关于虚拟dom

1. 无虚拟dom：如果有100条数据，后来增加了1条数据的话，先存在的100条数据不会被复用，而是被这101条数据覆盖

2. 虚拟dom作用：数据与真实dom之间存在一层虚拟dom，虚拟dom也存在内存中，数据通过虚拟dom再去渲染出真实dom。在数据发生改变时，在原先的100条数据中增加1条，数据会首先生成101个虚拟dom，再去对比旧的虚拟dom，有则保存，无则增加，减少对真实dom的操作，减少对浏览器的加载

3. 虚拟dom:

本质是object类型的对象（一般对象）
虚拟dom比较“轻”，真实dom比较“重”，因为虚拟dom是react内部在用，无需真实dom上那么多的属性
虚拟dom最终会被react转化为真实dom，呈现在页面上

react的初次使用（无脚手架）

需要引用的三个插件：

babel.min.js 用于jsx转化为js
react.development.js react的核心库
react-dom.development.js react的扩展库，扩展操作dom
prop-types 用于对组件标签属性进行限制

注意：引入顺序必须是先引入react.development.js 再引入 react-dom.development.js

另：写jsx时脚本标签为<script type="text/babel"></script>

简单实现：

<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>

  <!-- 引入库 -->
  <script src="../basejs16.8/react.development.js"></script>
  <script src="../basejs16.8/react-dom.development.js"></script>
  <script src="../basejs16.8/babel.min.js"></script>

  <script type="text/babel">
    // 1. 创建虚拟dom
    // 注意：此处一定不写引号
    const VDOM = <h1>hello,react</h1>
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>
</body>

实现效果：

js与jsx的对比

js实现多层标签嵌套

// 利用 react.createElement 创建虚拟dom
const VDOM = react.createElement('h1',{id:'title'},react.creatElement('span',{},'hello react'))

jsx实现多层嵌套

const VDOM = (  // 一定注意不需要引号
<h1 id='title'>
  <span>hello react</span>
</h1>
)

在谷歌浏览器里安装react-dev-tools工具，可以观察运用的组件

使用函数式组件

  <script type="text/babel">
    // 创建函数式组件，要用大写字母开头，首字母大写为组件，与引用保持一致
    function MyComponent(){
      return <h2>这是一个函数式组件</h2>
    }

    // 组件要使用首字母大写的标签，并且需要闭合标签
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
  </script>

注意：函数式组件无this，所以没有三大属性中的state，refs

使用props是因为函数可以接收参数，故能使用

  <script type="text/babel">
    // 创建实例  函数式组件
    function Person(props){
      const {name, age, sex} = props
        return (
          <ul>
            <li>姓名：{name}</li>
            <li>年龄：{age}</li>
            <li>性别：{sex}</li>  
          </ul>
        )
    }
    // 限制类型
    Person.propTypes = {
      name: PropTypes.string.isRequired,  // isRequired必须传的值
      age: PropTypes.number,
      sex: PropTypes.string
    }

    // 设置默认值
    Person.defaultProps = {
      age: 18,
      sex: '男'
    }

    // 渲染到页面上
    ReactDOM.render(<Person name="li" age={18} sex="女"/>,document.getElementById('test1'))
  </script>

使用类式组件

必须要有的三点

extends
render

render是放在哪里的？——MyComponent的原型对象上，供实例使用

render 中的this是谁？——MyComponent的实例对象
return

  <script type="text/babel">
    // 创建类式组件,继承react中的component
    class MyComponent extends React.Component {
      // 构造器不一定要写，看需不需要初始化数据
      // 与渲染的render函数无关系，仅为同名
      render(){
      // render是放在哪里的？——MyComponent的原型对象上，供实例使用
        return <h2>这是一个类式组件，一般用于定义复杂组件</h2>
      }
    }
    // 渲染到页面上
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
     /**
     * 执行renderDOM.render(<MyComponent/>...) 后发生了什么
     * 1. React解析组件标签，找到了MyComponent组件
     * 2. 发现组件是使用类组件，随后new出来该类的实例，并通过该实例调用到原型上的render方法
     * 3. 将render返回的虚拟DOM 转为真实DOM，随后呈现在页面中
    */
  </script>