react 基础

理想和远方_在路上

已于 2023-11-07 21:16:55 修改

阅读量1.8k

点赞数 3

文章标签： react.js jsx

于 2021-11-08 10:19:01 首次发布

本文链接：https://blog.csdn.net/weixin_38822843/article/details/120598795

版权

一. 什么是react？

react是一种用于构建用户界面的javaScript库

react主要用来写html，或构建web应用

如果用mvc的角度来看，react仅仅是视图层（v），也就是只负责视图的渲染，并不是提供了完成的M和C的功能。

二. react的特点

1.声明式

只需要描述html 看起来是什么样，就跟写html一样。

react 负责渲染UI，并在数据变化是更新UI。

const jsx = <div className="app">
<h1>Hello React!动态变化数据：[count]</h1>
</div>

2.基于组件

组件是react最重要的内容。

3.学习一次，随处可用

使用react 可以开发web应用

使用react可以开发移动端原生应用（react-native）

使用react可以开发VR(虚拟现实)应用（react 360）

三. react的安装及使用

npm i react react-dom

react 包是核心，提供创建元素，组件等功能

react-dom 包提供DOM相关功能

react的使用

// 1.引入react 和 react-dom 两个js 文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

<div id="f=root"></div>
<script>
    // 2.创建 React 元素 
    // 参数一：元素名称，参数二：元素属性，参数三：元素的子节点，第三个以及以后的参数：元素的子节点
   // createElement 繁琐不简洁；不直观，无法一眼看出所描述的结构；不优雅，用户体验不爽。所以建议使用 jsx
    const title = React.createElement("h1",null,"Hello React",React.createElement("span",null,"我是span节点"))
    // 3.渲染 React 元素到页面中
    //   参数一：要渲染的React元素，参数二：挂载点（DOM对象，用于指定渲染到页面中的位置）
    ReactDOM.render(title,document.getElementById("root"))
</script>

四. react脚手架的基本使用

1.初始化项目，命令：npx create-react-app my-app

2.启动项目，在项目根目录执行命令：npm start

补充说明：

1.推荐使用 npx create-react-app my-app

2.npm init react-app my-app

3. yarn create react-app my-app

yarn 是 facebook 发布的包管理器，可以看做是npm 的替代品，功能与npm 相同

yarn 具有快速，可靠和安全的特点

初始化新项目：yarn init

安装包：yarn add 包名称

安装项目依赖项：yarn

其他命令，请参考 yarn 文档

五. jsx

1, 什么是jsx

简介：

jsx 是JavaScript XML的简写，表示在Javascript 代码中写XML(HTML)格式的代码。

优势：

声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率。

jsx 是react 的核心内容

JSX 表示在js 中写 HTML结构，是React 声明式的提现。

使用 JSX 配合嵌入的 JS 表达式，条件渲染，列表渲染，可以描述任意的UI结构。

推荐使用 className 的方式给JSX 添加样式。

React 完全利用 JS 语言自身的能力来编写UI，而不是造轮子增强HTML 功能。

2, 如何使用jsx创建React元素

// 1. 使用 jsx 语法， 创建 React 元素 
const title = <h1> Hello JSX  </h1>

// 2. 使用 ReactDOM.render() 方法渲染 react 元素到页面中
ReactDOM.render(title,document.getElementById("root"))

· 3, 为什么脚手架中可以使用 jsx 语法

jsx 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。

需要使用 label 编译处理后，才能在浏览器环境中使用。

create-react-app 脚手架中已经默认有该配置，无需手动配置。

编译 jsx 语法的包为：@babel/preset-react

注意点：

1.react 元素的属性名使用驼峰命名法

2.特殊属性名：class -> className , （label 标签的）for -> htmlFor ,tabindex -> tabIndex

3.没有子节点的react元素可以用 /> 结束

4.推荐使用小括号包裹 jsx ，从而避免 JS 中的自动插入分号陷阱。

const dv = (

<div> Hello JSX </div>

)

4, 在jsx中使用JavaScript 表达式

jsx 的表达式 { }

const name = 'jack'

// 1. 使用 jsx 语法， 创建 React 元素 
const title = <h1> Hello { name }  </h1>

// 2. 使用 ReactDOM.render() 方法渲染 react 元素到页面中
ReactDOM.render(title,document.getElementById("root"))

5, 使用jsx的条件渲染和列表渲染

条件渲染

场景：loading 效果

条件渲染：根据条件渲染特定的 JSX 结构

可以使用 if/else 或者三元运算符或者逻辑与运算符来实现
const loading = true
const loadData = () => {
    if(loading){
      return <div> 数据加载中，请稍后。。。 </div>
    }
    return <div> 数据加载完成，此处显示加载后的数据 </div>
}

const dv = (
<div>
{ loadData }
</div>
)

列表渲染

如果要渲染一组数据，应该使用数组的map() 方法

注意：渲染列表时应该添加key 属性，key 属性的值要保证唯一 ,尽量避免使用索引号作为key

原则：map() 遍历谁，就给谁添加 key 属性
const poem = [
    {id:1,name:"静夜思"},
    {id:2,name:"登鹳雀楼"}
    {id:3,name:"草"}
]

const list = (
    <ul>
        { poem.map(item => <li key="{item.id}">{ item.name } </li>) }
    </ul>
)

6, 给 jsx 添加样式

(1). 行内样式-----style
<h1 style={{color:'red',backgroudColor:'skyblue'}}>
    JSX 样式处理
</h1>
(2).类名-----className（推荐）
<h1 className="title">
    JSX 样式处理
</h1>

六. react组件的使用

1，React 组件的两种创建方式

React 组件的介绍

组件是 React 中的一等公民，使用React 就是在用组件

组件表示页面中的部分功能

组合多个组件实现完成的页面功能

组件的特点：可复用，独立，可组合

（1）使用函数创建组件

使用JS的函数（或者箭头函数）创建的组件

约定：函数名称必须以大写字母开头,React据此区分组件和普通的React元素

函数组件必须有返回值，表示该组件的结构

如果返回值为null,表示不渲染任何内容
<div id="root"></div>
<script>
function Hello(){
return (
    <div> 这是我的第一个函数组件 </div>
)
}
//渲染函数组件,用函数名作为组件标签名
ReactDOM.render(<Hello />,document.getElementById("root"))

</script>

//无返回值时，案例如下
<script>
function Hello(){
return null
}

</script>

//箭头函数创建组件的方式
<script>
const Hello = () => <div>这是我的第一个函数组件</div>
//渲染函数组件,用函数名作为组件标签名
ReactDOM.render(<Hello />,document.getElementById("root"))
</script>
（2）使用类创建组件

约定: 类名称必须以大写字母开头

类组件应该继承React.Component父类，从而可以使用父类中提供的方法和属性

类组件必须提供render方法

render() 方法必须有返回值，表示该组件的结构
class Hello extends React.Component{
    render(){
        return <div> Hello class Component </div>
    }
}

//渲染函数组件,用函数名作为组件标签名
ReactDOM.render(<Hello />,document.getElementById("root"))
（3）组件抽离为独立js文件。以hello.js为例

创建js文件

在js文件中导入React。 import React from 'react'

创建组件（函数或者类）

在js 中导出该组件

hello.js
import React from ‘react’
class Hello extends React.Component{
    render(){
        return <div> hello class component </div>
    }
}

//导出组件
export default Hello
index.js
import React from ‘react’
import ReactDOM from ‘react-dom’

import Hello from './hello'

ReactDOM.render(<Hello/>,document.getElementById("root"))
2，能够给react 元素绑定事件

React 事件处理

事件绑定

React 事件绑定语法与DOM事件语法相似

语法：on+事件名称 = {事件处理程序}，比如：onClick={() =>{}}

注意：React事件采用驼峰命名法，比如：onMouseEnter、onFocus

在函数组建中绑定事件

事件对象

可以通过事件处理程序的参数获取到事件对象

React 中的事件对象叫做：合成事件（对象）

合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题
class App extends React.Component{
    handleClick(e){
        //组织浏览器的默认行为
        e.preventDefault()
        console.log("a标签的单击事件触发了")
    }
    render(){
      return(
        <s src="http://www.baudi.com" onClick={this.handleClick}>百度一下，你就知道</a>
      )  
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))
有状态组件和无状态组件

3，能够使用state 和 setSate（）

        函数组件又叫做无状态组件，类组件又叫做有状态组件

状态(state)即数据，是组件内部的私有数据，只能在组件内部使用，state的值是对象，表示一个组件中可以有多个数据

函数组件没有自己的状态，只负责数据展示（静）

类组件有自己的状态，负责更新UI，让页面“”动“”起来

state 的基本使用

        状态即数据，状态是私有的，只能在组件内部使用通过this.state 来获取状态

setState()修改状态

         状态是可变的

语法：this.setState({要修改的数据})

注意：不要直接修改state中的值，这个错误的！

setState()作用：1.修改state,2.更新UI

思想：数据驱动视图
class Hello extends React.Component{
    //简化语法
    state={
     count:0
    }
    render(){
        return (
            <div> 
                <h1>计数器：{this.state.count}</h1>
                <button onClick={
                    this.setState({
                        count:this.state.count + 1
                    })
                }>+1</button>
            </div>
    
        )
    }
}
从JSX中抽离事件处理程序

jsx 中掺杂过多的逻辑代码，会显得非常混乱

推荐：将逻辑抽离到单独的方法，保证JSX 结构清晰

原因：事件处理程序中的this 的值为 undefined

希望：this指向组件实例（render 方法中的this 即为组件实例）

4，能够处理事件中的this 指向问题

事件绑定 this 指向

改变this 指向的方法

1.箭头函数
<button onClick={() => {this.onIncrement()}}>+1</button>
2.Function.prototype.bind()
constructor(){
   super()
   this.state = {
      count:0
   }
   this.onIncrement = this.onIncrement.bind(this)
}
3.class的实例方法
onIncrement = () => {
    this.setState({
         count:this.state.count + 1
    })
}
箭头函数
class Hello extends React.Component{
    //简化语法
    state={
     count:0
    }
    onIncrement(){
        this.setState({
            count:this.state.count + 1
        })
    }
    render(){
        return (
            <div> 
                <h1>计数器：{this.state.count}</h1>
                //使用箭头函数，来解决this指向的问题
                // 箭头函数中的this 指向外部环境，此处为render()方法
                <button onClick={() => {this.onIncrement()}}>+1</button>
            </div>
    
        )
    }
}
Function.prototype.bind()

利用ES5中的 bind() 方法，将事件处理程序中的 this 与组件实例绑定到一起
class Hello extends React.Component{
    //简化语法
    
    constructor(){
        super()
        this.state = {
         count:0
        }
        this.onIncrement = this.onIncrement.bind(this)
    }

    onIncrement(){
        this.setState({
            count:this.state.count + 1
        })
    }
    render(){
        return (
            <div> 
                <h1>计数器：{this.state.count}</h1>
                
                <button onClick={this.onIncrement()}>+1</button>
            </div>
    
        )
    }
}
class的实例方法

利用箭头函数形式的class 实例方法

注意：该语法是实验性语法，但是，由于babel的存在可以直接使用
class Hello extends React.Component{
    //简化语法
    state={
     count:0
    }
    onIncrement = () => {
        this.setState({
            count:this.state.count + 1
        })
    }
    render(){
        return (
            <div> 
                <h1>计数器：{this.state.count}</h1>
               
                <button onClick={this.onIncrement()}>+1</button>
            </div>
    
        )
    }
}
5，能够使用受控组件方式处理表单

受控组件

HTML 中表单元素是可以输入的，也就是有自己的可变状态

react 中可变状态通常保存在state 中，并且只能通过 setState()来修改

React 将 state 与表单元素值 value 绑定到一起，由state 的值来控制表单元素的值

受控组件：其值受到 React 控制的表单元素

文本框，富文本框，下拉菜单都是通过 value 获取值，复选框是通过 checked 来获取。
<input type="text" value={this.state.txt} />
<script>
    state={
       txt:''
    }
</script>
多表单元素优化

1.给表单元素增加name属性，名称与state 相同

2.根据表单元素类型获取对应值

3.在 change 事件处理程序中通过【name】来修改对象的state
<div id="root"></div>
<script>
const App  extends React.Component{
    handleForm = e => {
      const target = e.target
      const value = target.type === "checkbox" ? target.checked : target.value
      //获取name
      const name = target.name
      this.setState({
        [name]:value
      })
    }
    render(){
        return (
            <input type="text" name="txt" value="{this.state.txt} onChange="{this.handleForm}"/>
            
        )
    }
}
</script>
非受控组件（DOM方式）

借助 ref ,使用原生DOM方式来获取表单元素值

ref 的作用获取DOM或组件

使用步骤

1.调用React.createRef()方法创建一个 ref 对象

2.将创建好的 Ref 对象添加到文本框中

3.通过 ref 对象获取到文本框的值
<div id="root"></div>
<script>
const App  extends React.Component{
  constructor(){
    super()
    this.txtRef = React.createRef()
  }

  getTxt = () => {
    console.log(this.txtRef.current.value )
  }

  render(){
    return (
       <div>
        <input  type="txt" ref={this.txtRef} />
        <button onClick={this.getTxt} >获取文本框的值</button>
       </div>
    )
  }

}
ReactDOM.render(<App />,document.getElementById('root'))
</script>