从Vue2，开发web前端学习，面试秘籍

最新推荐文章于 2024-07-24 23:00:08 发布

努力马斯克

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量810

点赞数 15

分类专栏：前端程序员文章标签：前端学习

本文链接：https://blog.csdn.net/m0_60452293/article/details/136796017

版权

前端程序员专栏收录该内容

9 篇文章 0 订阅

订阅专栏

}

复制代码

import HelloWorld from ‘./HelloWorld’;

export default function Index(){

const handleClick = ()=>{

console.log(‘点击事件’);

}

return (

<HelloWorld onClick={() => { handleClick() }}>

)

}

复制代码

7、React中组件如何改变数据

上面介绍了，React组件的数据分为内部数据state和参数数据props，对应的改变方法也不一样。

7.1 改变内部数据state

比如要改变组件中定义的内部数据title。

类组件的写法：

import React from ‘react’;

export default class HelloWorld extends React.Component {

constructor(props) {

super(props);

this.state = {

title: ‘hello world’,

className: ‘title’

};

// 为了在回调中使用 this，这个绑定是必不可少的

this.handleClick = this.handleClick.bind(this);

}

handleClick() {

this.setState(state => ({

title: ‘hello react’,

className: ‘title active’

}));

}

render() {

return (

className={className}

onClick={this.handleClick}

{title}

);

}

复制代码

在this.setState()中可以传递一个函数或一个对象，建议传递一个函数(state,props) =>{}，函数可以接受内部数据state和参数数据props作为参数，而且state和props只读无法修改，每次调用this.setState时读取到的state和Props都是最新，特别适用多次调用this.setState修改同一个state的场景。最后函数放回一个对象，对象的内容为要修改的state。

函数组件的写法：

import { useState } from ‘react’;

export default function HelloWorld() {

const [title,setTitle] = useState(‘hello world’);

const [className,setClassName] = useState(‘title’);

const handleClick = () =>{

setTitle(‘hello react’);

setClassName(‘title active’)

}

return (

className={className}

onClick={handleClick}

{title}

);

}

复制代码

在React中称内部数据为state，使用useState(param)定义一个state时，可以通过参数param设置state的默认值，其返回一个数组，数组的第一个值是state，数组的第二个值是改变state的函数，可以调用该函数来改变state。

另外用useState定义的数据是响应式的，若页面有使用该数据，该数据改变后页面会重新渲染。

7.2 改变参数数据props

跟Vue一样，在组件中是不能直接改变props，假如要改变props，只能通过在父组件中改变传递给子组件的数据来间接改变props，那在子组件中怎么让父组件改变传递给子组件的数据呢，将在React中父子组件如何通讯介绍。

8、React中父子组件如何通讯

用一个例子来介绍，假如 HelloWorld 组件的 “hello world” 是用参数数据props中的title展示，点击组件中的改变标题按钮时变成 “hello React” 。

类组件的写法：

import React from ‘react’;

class HelloWorld extends React.Component {

constructor(props) {

super(props);

this.handleChangeTitle=this.handleChangeTitle.bind(this);

}

handleChangeTitle(){

this.props.changeTitle(‘hello React’);

}

render() {

return (

{this.props.title}

<button

onClick={this.handleChangeTitle.bind(this)}>

改变标题

);

}

HelloWorld.defaultProps = {

title: ‘hello world’

};

export default HelloWorld;

复制代码

import HelloWorld from ‘./HelloWorld.js’

import React from ‘react’

class Index extends React.Component {

constructor(props) {

super(props);

this.state={

info:‘hello world’

};

this.handleChangeTitle=this.handleChangeTitle.bind(this);

}

handleChangeTitle(data){

this.setState(state =>{

return {

info:data

}

})

}

render() {

return (

<HelloWorld

title={this.state.info}

changeTitle={this.handleChangeTitle}>

);

}

export default Index;

复制代码

函数组件的写法：

export default function HelloWorld(props: any) {

const { title = ‘hello world’, changeTitle } = props;

const handleChangeTitle = () => {

changeTitle(‘hello React’)

}

return (

{title}

改变标题

);

}

复制代码

import { useState } from ‘react’

import HelloWorld from ‘./HelloWorld.js’

export default function Index(){

const [info,setInfo] = useState(‘hello world’);

const handleChangeTitle = (data)=>{

setInfo(data);

}

return (

)

}

复制代码

在父组件中定义一个info数据传递给子组件的title参数数据，同时也定义了一个回调函数handleChangeTitle来改变info数据，并把回调函数也传递给子组件的changeTitle参数数据。

这样子组件的changeTitle参数数据可以作为一个函数来调用，调用changeTitle时相当调用handleChangeTitle回调函数，可以把要改变的值通过data函数参数传递出来，再执行setInfo(data)改变info数据，再传递给子组件的title参数数据，间接改变了title参数数据，实现了React中组件如何改变参数数据。

在父组件中也可以调用setInfo改变传递给子组件的title参数数据的info数据，以上就是React中父子组件通讯的一个方法。

9、React中如何监听组件数据的变化

在Vue中可以用简单地用watch来监听数据的变化，而在React中比较复杂，子组件的类型不同实现方法也不同。

类组件的写法：

在类组件中用componentDidUpdate这个生命周期方法来实现，该方法首次渲染时componentDidUpdate不会执行，在后续props和state改变时会触发componentDidUpdate，其接受的第一个参数prevProps代表改变前的props，第二参数prevState代表改变前的state。

componentDidUpdate(prevProps, prevState){

if(prevProps.title !== this.props.title){

console.log(‘props中的title数据改变了’);

}

if(prevState.info !== this.state.info){

console.log(‘state中的info数据改变了’);

}

复制代码

函数组件的写法

在函数组件中，可以useEffect这个React Hook监听数据的变化，但是无法像Vue的watch能够获取改变前的旧数据。所以要自定义一个Hook来实现类似Vue的watch的功能。自定义Hook是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。故把这个自定义Hook称为useWatch。

如何获取改变前的旧数据，可以在第一次数据改变时触发useWatch时用一个容器把旧数据存储起来，下次再触发useWatch时通过读取容器中的值就可以获取改变前的旧数据。容器可以用useRef这个 Hook 来创建。

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

import {useEffect,useRef} from ‘react’;

export function useWatch(value,callback){

const oldValue = useRef();

useEffect(() =>{

callback(value,oldValue.current);

oldValue.current=value;

},[value])

}

复制代码

但是useEffect会在组件初次渲染后就会调用一次，导致callback回调函数会被执行一次，另外在Vue的watch是用immediate配置来控制在组件初次渲染后马上执行callback回调函数，且默认不会在组件初次渲染后执行callback回调函数，接着在_hook.js_中定义一个useWatch。

首先实现一下组件初次渲染不执行callback回调函数。

import {useEffect,useRef} from ‘react’;

export function useWatch(value,callback){

const oldValue = useRef();

const isInit = useRef(false);

useEffect(() =>{

if(!isInit.current){

isInit.current = true;

}else{

callback(value,oldValue.current);

}

oldValue.current=value;

},[value])

}

复制代码

再添加immediate配置来控制在组件初次渲染后是否马上执行callback回调函数。

import {useEffect,useRef} from ‘react’;

export function useWatch(value,callback,config={immediate: false}){

const oldValue = useRef();

const isInit = useRef(false);

useEffect(() =>{

if(!isInit.current){

isInit.current = true;

if(config.immediate){

callback(value,oldValue.current);

}

}else{

callback(value,oldValue.current);

}

oldValue.current=value;

},[value])

}

复制代码

另外Vue的watch还返回一个unwatch函数，调用unwatch函数可以停止监听该数据。

import { useEffect, useRef } from ‘react’;

export function useWatch(value, callback, config = { immediate: false }) {

const oldValue = useRef();

const isInit = useRef(false);

const isWatch = useRef(true);

useEffect(() => {

if (isWatch.current) {

if (!isInit.current) {

isInit.current = true;

if (config.immediate) {

callback(value, oldValue.current);

}

} else {

callback(value, oldValue.current);

}

oldValue.current = value;

}

}, [value])

const unwatch = () => {

isWatch.current = false;

};

return unwatch;

}

复制代码

useWatch 这个Hook 定义好后，这么使用。

export {useState} from ‘react’;

export {useWatch} from ‘./hook.js’;

export default function HelloWorld() {

const [title,setTitle] = useState(‘hello world’)

useWatch(title, (value, oldValue) => {

console.log(value);

console.log(oldValue)

})

const handleChangeTitle = () => {

setTitle(‘hello React’)

}

return (

{title}

);

}

复制代码

10、React中父组件如何调用子组件的方法

在Vue中是使用ref给子组件赋予一个标识 ID ，再使用this.$refs[ID]访问到这个子组件的实例对象，然后通过实例对象去调用子组件的方法。而在React中比较复杂，子组件的类型不同实现方法也不同。

类子组件的写法：

import React from ‘react’;

export default class HelloWorld extends React.Component {

constructor(props) {

super(props);

this.state = {

title:‘hello World’

};

}

handleChangeTitle(){

this.setState({

title:‘hello React’

});

}

render() {

return (

{this.state.title}

);

}

复制代码

import React from ‘react’;

import HelloWorld from ‘./HelloWorld.js’;

class Index extends React.Component {

constructor(props) {

super(props)

this.myCom = React.createRef();

this.changeTitle = this.changeTitle.bind(this);

}

changeTitle() {

this.myCom.current.handleChangeTitle();

}

render() {

return (

改变标题

)

}

export default Index;

复制代码

函数组件的写法：

useRef()无法使用在函数组件上使用，在函数组件中要先使用 useImperativeHandle 定义要暴露给父组件的实例值，另外要把函数组件传入forwardRef处理后再导出。

import { useState, forwardRef, useImperativeHandle } from ‘react’;

const HelloWorld = (props, ref) => {

const [title, setTitle] = useState(‘hello World’);

useImperativeHandle(ref, () => ({

handleChangeTitle: () => {

setTitle(‘hello React’)

}));

return (

{title}

);

}

export default forwardRef(HelloWorld)

复制代码

import { useRef } from ‘react’

import HelloWorld from ‘./HelloWorld.js’

export default function Index() {

const myCom = useRef();

const changeTitle = () => {

myCom.current.handleChangeTitle();

}

return (

改变标题

)

}

复制代码

11、React中组件插槽怎么实现

11.1 普通插槽

其实React中是没有插槽的概念，不过可以用props.children来实现插槽的功能。

每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。

例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，也可以用插槽的形式来实现，通过props.children把 “ hello World ” 从父组件传递进去。

类组件的写法：

import React from ‘react’;

export default class HelloWorld extends React.Component {

constructor(props) {

super(props);

}

render() {

return (

{this.props.children}

);

}

复制代码

import React from ‘react’;

import HelloWorld from ‘./HelloWorld.js’;

class Index extends React.Component{

constructor(props) {

super(props);

}

render() {

return (

hello World

)

}

export default Index;

复制代码

函数组件的写法：

export default function HelloWorld(props){

const {children}=props;

return (

{children}

);

}

复制代码

import HelloWorld from ‘./HelloWorld.js’;

export default function Index(){

return (

hello World

)

}

复制代码

11.2 具名插槽

可以通过props给子组件传递一个函数，如果这个函数最后返回React元素，其React元素是用JSX语法编写的，这样就间接实现具名插槽的功能。

例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，用具名插槽的形式来实现。

类组件的写法：

import React from ‘react’;

class HelloWorld extends React.Component{

constructor(props){

super(props)

this.elementSlot = “”;

if (this.props.element) {

this.elementSlot = this.props.element();

}

render(){

return (

{this.elementSlot}

);

}

export default HelloWorld;

复制代码

import React from ‘react’;

import HelloWorld from ‘./HelloWorld.js’;

class Index extends React.Component{

constructor(props) {

super(props);

}

info(){

return(

hello World

)

}

render() {

return (

)

}

export default Index;

复制代码

函数组件的写法：

export default function HelloWorld(props) {

const { children, element } = props;

let elementSlot = “”;

if (element) {

elementSlot = element();

}

return (

{elementSlot}

);

}

复制代码

import HelloWorld from ‘./HelloWorld.js’;

export default function Index(){

const info = () =>{

return (

hello World

)

}

return (

)

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

html5知识

css基础知识

() =>{

return (

hello World

)

}

return (

)

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

[外链图片转存中…(img-QC7t2ddW-1710713113194)]
[外链图片转存中…(img-V2MRgeEC-1710713113195)]
[外链图片转存中…(img-ciozr7Iu-1710713113196)]
[外链图片转存中…(img-SJaWiGpu-1710713113196)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-d78suXt0-1710713113196)]

最后

推荐一些系统学习的途径和方法。

路线图

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

html5知识

css基础知识

努力马斯克

关注

15
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
从Vue2，开发web前端学习，面试秘籍

推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML 和 CSS：() =>{return (return (小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
复制链接

扫一扫

专栏目录