react基础知识1

最新推荐文章于 2022-06-22 03:14:37 发布

麦当-咕咚-迪亚

最新推荐文章于 2022-06-22 03:14:37 发布

阅读量160

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/qq_45775968/article/details/113794134

版权

本文介绍了React的基础知识，包括React的用途、特点、虚拟DOM和DOMDiff算法的优势。详细讲解了JSX的使用，如何通过ReactDOM.render()渲染虚拟DOM，以及如何利用state和props进行数据管理。此外，还探讨了组件的生命周期，包括关键的生命周期方法，并通过实例展示了组件的创建和更新过程。

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

React基础知识1

一.React的基本认识

1.1 官网:https://reactjs.org/

1.2 介绍描述

<1> 用于构建用户界面的 JavaScript 库(只关注于View)
<2> 由Facebook开源

1.3 React的特点

1)Declarative(声明式编码)
2)Component-Based(组件化编码)
3)Learn Once, Write Anywhere(支持客户端与服务器渲染)
4)高效
5)单向数据流

1.4 React高效的原因

<1> 虚拟(virtual)DOM, 不总是直接操作DOM
<2> DOM Diff算法, 最小化页面重绘

1.5 React的基本使用

//相关的js库
1) react.js: React的核心库
2) react-dom.js: 提供操作DOM的react扩展库
3) babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

在这里插入图片描述

1.6 React开发者工具调试

网盘链接:
链接：https://pan.baidu.com/s/1XGRhKeM9I3c1WYHBMVkmTQ
提取码：4jj3
下载解压后将文件夹直接拖入到浏览器的扩展程序界面即可
在这里插入图片描述

1.7 React JSX

1.7.1 虚拟DOM

1)React提供了一些API来创建一种 `特别` 的一般js对象
  a.var element = React.createElement('h1', {id:'myTitle'},'hello')
  b.上面创建的就是一个简单的虚拟DOM对象
2)虚拟DOM对象最终都会被React转换为真实的DOM
3)我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

1.7.2 JSX

1.全称javascript xml,是react定义的一种类似于XML的JS扩展语法:XML+JS
2.作用:用来创建react虚拟Dom元素/对象
    a.var ele = <h1>Hello JSX!</h1>
    b.注意1: 它不是字符串, 也不是HTML/XML标签
    c.注意2: 它最终产生的就是一个JS对象
3.标签名任意: HTML标签或其它标签
4.标签属性任意: HTML标签属性或其它
5.基本语法规则
    a.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    b.遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
6.babel.js的作用
    a.浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    b.只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

1.7.3 渲染虚拟Dom元素

1)语法:  ReactDOM.render(virtualDOM, containerDOM) 
2)作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3)参数说明
a.参数一: 纯js或jsx创建的虚拟dom对象
b.参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

1.7.4 建立虚拟Dom的两种方式

1.纯JS(一般不用)
React.createElement('h1',  {id:'myTitle'},  title)
2.JSX:
<h1 id='myTitle'>{title}</h1>

1.7.5 练习- - -动态的展示列表数据

<body>
  <h2>玄机科技旗下动漫</h2>
  <div id="example1"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    /*
     功能: 动态展示列表数据
     */
    const names=['秦时明月','天行九歌','斗罗大陆','吞噬星空','天宝伏妖录','武庚纪']
    //1.创建虚拟Dom
    const ul=(
        /**
         * 1.当有嵌套的结构时,尽量用小括号把虚拟Dom元素给括起来()
         * 2.如何将数据的数组转换成标签的数组?
         * 使用数组的map方法
         */      
      <ul>{
        names.map((name,index)=><li key={index}>{name}</li>)
      }</ul>
    )
    //2.渲染虚拟Dom
    ReactDOM.render(ul,document.getElementById('example1'))
  </script>
</body>

在这里插入图片描述

1.8 模块与组件/模块化与组件化

1.8.1 模块与组件

//模块
1)理解: 向外提供特定功能的js程序, 一般就是一个js文件
2)为什么:  js代码更多更复杂
3)作用: 复用js, 简化js的编写, 提高js运行效率
//组件
1)理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
2)为什么: 一个界面的功能更复杂
3)作用: 复用编码, 简化项目编码, 提高运行效率

1.8.2 模块化与组件化

//模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
//组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

二.React 面向组件编程

1.JS是面向对象编程
2.面向对象(最底层)-->面向模块-->面向组件(最上层)

2.1基本理解和使用(自定义组件component)

//2.1.1 编写注意
1.组件名必须首字母大写
2.虚拟DOM元素只能有一个根元素
3.虚拟DOM元素必须有结束标签
//2.1.2 render渲染组件标签的基本流程
1.React内部会创建组件实例对象
2.得到包含的虚拟DOM并解析为真实DOM
3.插入到指定的页面元素内部

<body>
  <div id="example1"></div>
  <div id="example2"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
  //1.定义组件
       /*方式1:工厂函数组件(简单组件)*/
  function MyComponent(){
    return <abbr title="简单组件"><h2>工厂函数组件</h2></abbr>
  }
        /*方式2:ES6类组件(复杂组件)*/
  class MyComponent2 extends React.Component{
    render(){
      console.log(this) //打印MyComponent的实例对象
      return <abbr title="复杂组件"><h2>ES6类组件</h2></abbr>
    }
  }
  //2.渲染组件标签
 ReactDOM.render(<MyComponent/>,document.getElementById('example1'))
 ReactDOM.render(<MyComponent2/>,document.getElementById('example2'))
  </script>
</body>

2.2 组件三大属性：1.state

1 理解
1.state是组件对象最重要的属性, 值是对象(可以包含多个数据)
2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
3.有状态state时,要用ES6类复杂组件;没有state时要用工厂函数组件

<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
  /*
  需求: 自定义组件, 功能说明如下
    1. 显示h2标题, 初始文本为: I Love you
    2. 点击标题更新为: You Love me
  */
 //1.定义组件
 class Like extends React.Component{
    constructor (props) {
    super(props)
    //初始化状态
    this.state = {
      isLikeMe : false
    }

    /*将新增方法中的this强制绑定为组件对象*/
    this.handleClick=this.handleClick.bind(this)
  }
  /*新添加的方法:内部的this默认不是组件对象,而是undefined*/
    handleClick(){
      //得到状态并取反
      const a=!this.state.isLikeMe
      //更新状态
      this.setState({isLikeMe:a})
    }
  /*render是重写组件类的方法*/
   render(){
     //读取状态
     const {isLikeMe}=this.state
     return <h2 onClick={this.handleClick}>{isLikeMe?'You Love me':'I Love you'}</h2>
   }
 }
 //2.渲染组件标签
 ReactDOM.render(<Like/>,document.getElementById('example'))
</script>
</body>

在这里插入图片描述

组件三大属性：2.props

//理解:
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
//作用:
1.通过标签属性从组件外向组件内传递变化的数据
2.注意: 组件内部不要修改props数据
----问题: 区别组件的props和state属性-----
1.state: 组件自身内部可变化的数据
2.props: 从组件外部向组件内部传递数据, 组件内部只读不修改

在这里插入图片描述

    //组件类的构造函数,查看所有属性
    constructor(props){
      super(props)
        console.log(props)
      }

组件三大属性：3.refs与事件处理

---理解:
1.组件内的标签都可以定义ref属性来标识自己
      a.<input type="text" ref={input => this.msgInput = input}/>
      b.回调函数在组件初始化渲染完或卸载时自动调用
2.在组件中可以通过this.msgInput来得到对应的真实DOM元素
3.作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据
---事件处理
1.通过onXxx属性指定组件的事件处理函数(注意大小写)
     a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
     b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2.通过event.target得到发生事件的DOM元素对象
    handleBlur(event){
      alert(event.target)
    }
----特别注意
1.组件内置的方法中的this为组件对象
2.在组件类中自定义的方法中this为null
    a.强制绑定this: 通过函数对象的bind()
    b.箭头函数(ES6模块化编码时才能使用)

在这里插入图片描述

2.3 组件组合使用

功能界面的组件化编码流程(重点)
1)拆分组件: 拆分界面,抽取组件
2)实现静态组件: 使用组件实现静态页面效果
3)实现动态组件
    a.动态显示初始化数据
    b.交互功能(从绑定事件监听开始)

在这里插入图片描述

2.4 组件生命周期

理解:
1.组件对象从创建到死亡它会经历特定的生命周期阶段
2.React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
3.我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

生命周期流程图:
在这里插入图片描述

-------重要概念-------
1-组件的三个生命周期状态:
    * Mount：插入真实 DOM
    * Update：被重新渲染
    * Unmount：被移出真实 DOM
2-React 为每个状态都提供了勾子(hook)函数
    * componentWillMount()
    * componentDidMount()
    * componentWillUpdate()
    * componentDidUpdate()
    * componentWillUnmount()
3-生命周期流程:
   a.第一次初始化渲染显示: ReactDOM.render()
      * constructor(): 创建对象初始化state
      * componentWillMount() : 将要插入回调
      * render() : 用于插入虚拟DOM回调
      * componentDidMount() : 已经插入回调
   b.每次更新state: this.setSate()
      * componentWillUpdate() : 将要更新回调
      * render() : 更新(重新渲染)
      * componentDidUpdate() : 已经更新回调
   c.移除组件: ReactDOM.unmountComponentAtNode(containerDom)
      * componentWillUnmount() : 组件将要被移除回调
4- 重要的勾子
1)render(): 初始化渲染或更新渲染调用
2)componentDidMount(): 开启监听, 发送ajax请求
3)componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
4)componentWillReceiveProps(): 后面需要时讲

2.5 虚拟DOM与DOM diff 算法

基本原理图:
在这里插入图片描述

<body>
<div id="example"></div>
<br>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
  /*
  验证:
  虚拟DOM+DOM Diff算法: 最小化页面重绘
  */
//1.定义组件
  class HelloWorld extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
          date: new Date()
      }
    }
    componentDidMount () {
      setInterval(() => {
        this.setState({
            date: new Date()
        })
      }, 1000)
    }
    render () {
      console.log('render()')
      return (
        <p>
          Hello, <input type="text" placeholder="你的名字"/>&nbsp;
          <span>It is {this.state.date.toTimeString()}</span>
        </p>
      )
    }
  }
  //2.渲染组件标签
  ReactDOM.render( <HelloWorld/>,document.getElementById('example'))
</script>
</body>