dtcms插件 刷脸支付 网络视频直播系统 CGLib动态代理 charts printing combobox configuration get stl bootstrap管理系统模板 郑州网站开发 软件测试项目实战案例 abaqus是什么软件 yml文件注释 python环境设置 java时间 java怎么连接数据库 java链接mysql数据库 java输出数组 java获得当前日期 java中获取当前时间 java获取文件 linux硬盘 hadoop权威指南 联发科p70 小程序源码下载 飞猪ip hexworkshop flash制作工具 subscribe 微信临时链接多久失效 小米9截图 0x000007a jsp源代码 fireworks序列号 qq浏览器手机版 兽之祝福 暴力猴 冰冠堡垒单刷路线
当前位置: 首页 > 学习教程  > 编程语言

react基础知识1

2021/2/13 19:16:22 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

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 A…

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定义的一种类似于XMLJS扩展语法: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>

在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_700302.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?