公司网站建设模板,Wordpress手机端模版,安全者 wordpress,百度seo排名工具React之组件的介绍、创建与使用,事件对象,this指向问题,修改状态以及受控组件与非受控组件 一、组件基本介绍二、组件创建2.1 函数组件2.2 类组件 三、将组件提取到单独的js文件中四、有状态组件和无状态组件五、类组件的状态六、事件处理6.1 注册事件6.2 事件对象6.3 this指向… React之组件的介绍、创建与使用,事件对象,this指向问题,修改状态以及受控组件与非受控组件 一、组件基本介绍二、组件创建2.1 函数组件2.2 类组件 三、将组件提取到单独的js文件中四、有状态组件和无状态组件五、类组件的状态六、事件处理6.1 注册事件6.2 事件对象6.3 this指向问题6.4 this指向解决方案 七、setState 修改状态八、react核心理念(状态不可变)九、表单处理9.1 受控组件9.2 非受控组件-ref 一、组件基本介绍 组件是 React 开发现代前端开发中最重要的内容组件允许你将 UI 拆分为独立、可复用的部分每个部分都可以独立的思考组合多个组件组装乐高积木实现完整的页面功能特点独立、可复用、可组合组件包含三部分HTML/CSS/JS展示页面中的可复用部分 二、组件创建 2.1 函数组件 函数组件使用JS的函数或者箭头函数创建的组件 使用 JS 的函数(或箭头函数)创建的组件叫做函数组件约定1函数名称必须以大写字母开头React 据此区分组件和普通的 HTML标签约定2函数组件必须有返回值表示该组件的 UI 结构如果不需要渲染任何内容则返回 null 使用函数创建组件 // 使用普通函数创建组件 function Hello() {return div这是我的第一个函数组件!/div } function Button() {return button按钮/button }// 使用箭头函数创建组件 const Hello () div这是我的第一个函数组件!/div使用组件 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容对于函数组件来说渲染的内容是函数返回值对应的内容使用函数名称作为组件标签名称 // 使用 双标签 渲染组件 Hello/Hello ReactDOM.render(Hello/Hello, root)// 使用 单标签 渲染组件 Hello / ReactDOM.createRoot(document.querySelector(#root)).render(Hello/Hello)小结 在react中可以使用函数或者箭头函数创建组件组件的首字母必须大写 2.2 类组件 内容 使用 ES6 的 class 创建的组件叫做类class组件约定1类名称也必须以大写字母开头约定2类组件应该继承 React.Component 父类从而使用父类中提供的方法或属性约定3类组件必须提供 render 方法约定4render 方法必须有返回值表示该组件的 UI 结构 定义组件 // 导入 React import React from react class Hello extends React.Component {render() {return divHello Class Component!/div } } ReactDOM.render(Hello /, root)// 只导入 Component import { Component } from react class Hello extends Component {render() {return divHello Class Component!/div } }使用组件 ReactDOM.createRoot(document.querySelector(#root)).render(Hello/Hello)总结 使用class语法创建组件比函数创建稍微麻烦一些但是类组件的功能会比函数组件的功能更加强大hooks 之前 三、将组件提取到单独的js文件中 实现方式 创建 Hello.js创建组件函数 或 类在 Hello.js 中导出该组件在 index.js 中导入 Hello 组件渲染组件 核心代码 // index.js //直接导入 import Hello from ./Hello//按需导入 // import {Hello} from ./Hello// 渲染导入的Hello组件 ReactDOM.createRoot(document.querySelector(#root)).render(Hello/Hello)// Hello.js import { Component } from react class Hello extends Component {render() {return divHello Class Component!/div} } // 导出Hello组件(默认导出) export default Hello//按需导出 // export { // Hello // }四、有状态组件和无状态组件 内容 函数组件又叫做无状态组件 函数组件是不能自己提供数据【前提不考虑 hooks 的情况下】类组件又叫做有状态组件 类组件可以自己提供数据状态state是组件的私有数据当组件的状态发生了改变页面结构也就发生了改变数据驱动视图函数组件是没有状态的只负责页面的展示静态不会发生变化性能比较高类组件有自己的状态负责更新UI只要类组件的数据发生了改变UI 就会发生更新动态在项目中一般都是由函数组件和类组件共同配合来完成的 比如计数器案例点击按钮让数值1 0和1就是不同时刻的状态当状态从0变成1之后UI也要跟着发生变化。React想要实现这种功能就需要使用有状态组件来完成。 函数组件和类组件的区别有没有状态【前提不考虑 hooks 的情况下】 五、类组件的状态 内容 状态state即数据是组件内部的私有数据只能在组件内部使用状态 state 的值是对象表示一个组件中可以有多个数据通过 this.state.xxx 来获取状态 核心代码 创建 state class Hello extends Component {// 为组件提供状态state {count: 0,list: [],isLoading: true}render() {return (div计数器/div)} }读取状态通过 this.state 来获取状态 class Hello extends Component {// ...render() {// 通过 this.state 来访问类组件的状态return (div计数器{this.state.count}/div)} }六、事件处理 6.1 注册事件 内容 React注册事件与DOM的事件语法非常像 语法on事件名 事件处理程序 比如onClick{this.handleClick} 注意React事件采用驼峰命名法比如onMouseEnter, onClick 核心代码 class App extends React.Component {handleClick() {console.log(点击事件触发)}render() {return (divbutton onClick{this.handleClick}点我/button/div)} }6.2 事件对象 核心代码 可以通过事件处理程序的参数获取到事件对象注意React 中的事件对象是 React 内部处理后的事件对象一般称为SyntheticBaseEvent 合成事件对象。用法与 DOM 原生的事件对象用法基本一致 function handleClick(e) {e.preventDefault()console.log(事件对象, e) }a onClick{this.handleClick}点我不会跳转页面/a6.3 this指向问题 内容 事件处理程序中的this指向的是undefined render方法中的this指向的是当前react组件。只有事件处理程序中的this有问题 原因 事件处理程序的函数式函数调用模式在严格模式下this指向undefinedrender函数是被组件实例调用的因此render函数中的this指向当前组件 class App extends React.Component {state {msg: hello react}handleClick() {console.log(this.state.msg)}render() {return (divbutton onClick{this.handleClick}点我/button/div)} }总结 在react的事件处理函数中this指向undefined 6.4 this指向解决方案 内容 解决事件处理程序中this指向问题主要有三种方式 方式1箭头函数 class App extends React.Component {state {msg: hello react}handleClick() {console.log(this.state.msg)}render() {return (divbutton onClick{() this.handleClick()}点我/button/div)} }方式2bind class App extends React.Component {state {msg: hello react}handleClick() {console.log(this.state.msg)}render() {return (divbutton onClick{this.handleClick.bind(this)}点我/button/div)} }方式3箭头函数形式的实例方法 - 推荐使用 class App extends React.Component {state {msg: hello react}handleClick () {console.log(this.state.msg)}render() {return (divbutton onClick{this.handleClick}点我/button/div)} }总结 推荐使用方式3箭头函数形式的实例方法 解释为什么方式3可以解决 this 指向问题 // ES6 class Person1 {// 类的 构造函数constructor() {// 构造函数中的 this 就是实例对象console.log(this)this.name jackthis.fn () {console.log(this)}}// 上述写法简化语法// name jack// fn () {}// 这个形式的方法会被添加到原型中sayHi() {} }说明fn () {} 这种形式的语法是简化语法语法糖书写会更简单。实际上完整的写法是constructor() {this.fn () {} }即在构造函数中给 this 添加了一个方法 fn为什么可以解决 this 指向问题呢 因为 constructor 中创建的箭头函数内部的 this 会指向 constructor 中的 this 而 constructor 中的 this 就是实例对象也就是我们需要的 this七、setState 修改状态 内容 语法this.setState({ 要修改的部分数据 })setState() 作用1 修改 state 2 更新 UI思想数据驱动视图也就是只需要修改数据状态那么页面视图就会自动刷新 核心数据从现在开始我们关心的是如何修改数据而不再是关心如何修改DOM并且注意尽量避免直接手动 DOM通过 document.querySelector() 获取到到DOM对象然后再操作 操作 注意不要直接修改 state 中的值这是无效的 核心代码 class Hello extends Component {state {count: 0}handleClick () {this.setState({count: 10})} render() {return (divh1计数器{this.state.count}/h1button onClick{this.handleClick}1/button/div)} }// 在 count 当前值的基础上加 1 this.setState({count: this.state.count 10 })总结 能直接修改 state 的值吗不能如何修改 React 组件中的状态setState()setState 是哪来的从 Component 父类继承过来的 八、react核心理念(状态不可变) 内容 状态不可变指的是不要直接修改状态的值而是基于当前状态创建新的状态值 核心代码 state {count: 0,list: [1, 2, 3],person: {name: jack,age: 18} }// 【不推荐】直接修改当前值的操作 this.state.count this.state.count this.state.count 1 this.state.count 1// 只要是数组中直接修改当前数组的方法都不能用 this.state.list.push(123)this.state.person.name rose// 【推荐】不是直接修改当前值而是创建新值的操作 this.setState({count: this.state.count 1,list: [...this.state.list, 123],person: {...this.state.person,// 要修改的属性会覆盖原来的属性这样就可以达到修改对象中属性的目的了name: rose} })九、表单处理 9.1 受控组件 内容 HTML中表单元素是可输入的即表单元素维护着自己的可变状态value但是在react中可变状态通常是保存在state中的并且要求状态只能通过setState进行修改React中将state中的数据与表单元素的value值绑定到了一起由state的值来控制表单元素的值受控组件value值受到了react状态控制的表单元素 核心代码 class App extends React.Component {state {msg: hello react}handleChange (e) {this.setState({msg: e.target.value})}render() {return (divinput typetext value{this.state.msg} onChange{this.handleChange}//div)} }总结 使用受控组件的方式处理表单元素后状态的值就是表单元素的值。即想要操作表单元素的值只需要操作对应的状态即可* 9.2 非受控组件-ref 非受控组件借助于ref使用原生DOM的方式来获取表单元素的值 内容 受控组件是通过 React 组件的状态来控制表单元素的值非受控组件是通过手动操作 DOM 的方式来控制此时需要用到一个新的概念refref用来在 React 中获取 DOM 元素 核心代码 // 1 导入 createRef 函数 用来创建 ref 对象 import { createRef } from reactclass Hello extends Component {// 2 调用 createRef 函数来创建一个 ref 对象// ref 对象的名称txtRef可以是任意值// 命名要规范 txtDOM 元素的自己标识 ReftxtRef createRef()handleClick () {// 文本框对应的 DOM 元素// console.log(this.txtRef.current)// 4 获取文本框的值console.log(this.txtRef.current.value)}render() {return (div{/*3 将创建好的 ref 对象设置为 input 标签的 ref 属性值作用将 ref 和 input DOM 绑定到一起将来在通过 this.txtRef 拿到的就是当前 DOM 对象*/}input ref{this.txtRef} /button onClick{this.handleClick}获取文本框的值/button/div)} }