首页 > 其他分享 >React

React

时间:2024-02-21 19:14:54浏览次数:34  
标签:return React person state const JSX

React 和 Vue对比

  • React将一切视为函数。组件作为一个函数,返回JSX进行构建。
  • React高度自定义化,特别灵活。Vue相对将内容固定,不需要太多的自定义,开箱即用的感觉。可以将React比喻成手动档,Vue比喻成自动档。Vue与React相比,Vue2的选项式确实会让框架变得死板,但是Vue3组合式增强了函数式编程的思想,提高了Vue的灵活性,用Vue3和React相比,Vue3的简洁和灵活恰到好处。
  • React使用JSX编写模板,写惯Vue转React需要一段时间将思想转变过来。

 

JSX写模板

在组件函数中,需要通过return() 返回JSX内容。如果只有一行则不需要()

1.根组件必须使用一个块去包裹内容,因为只能返一个根元素。

这里的最外层标签可以使用<div></div> <></> <Fragment></Fragment>,他们最总都不会渲染成实际的标签

const A = () => {
    return (
        <>
          <p>111</p>  
        </>
    )
}

2.标签内属性命名需要用驼峰命名法

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

 

JSX中使用Javascript

使用{},在{}内写js表达式

  1. 传字符串用引号
  2. 传变量用{}
  3. 传css或对象用{{a:1,b:2}},{{color:'red'}}

 

组件传参和收参

传:定义参数名,使用{}包裹数据

<Avatar
    size={100}
    person={{ 
        name: 'Katsuko Saruhashi',
        imageId: 'YfeOqp2'
    }}
/>

收:与函数接收参数一样,接收一个props对象。可以通过结构的方式将参数展开。与解构一样,可以自定义默认值。

function Avatar(props) {
   // props.person
   // props.size
}
function Avatar({ person, size = 100 }) {

}

 

条件渲染

1.条件返回JSX:在return前做逻辑处理。通过不同的情况,分开return不同是JSX

2.选择性包含JSX:

  2.1 使用三目运算符:<li>{true ? (<p>true</p>) : (<p>false</p>)}</li>

  2.2 使用&&:<li>{true && (<p>true</p>)</li>

  2.3 使用赋值返回: 通过定义变量,进行逻辑判断给变量不同的JSX,然后再return这个变量

 

渲染列表

通过对数组进行循环,返回相应的标签。

需要对渲染的元素传入key属性,用于让react标识是每一个元素,最好使用独一无二的数据进行定义。

function List() {
    const list = [1,2,3]
    return (
        {list.map(l => <p key={l}>{l}</p>)}                  
    )
}
//1
//2
//3

 

响应事件

通过在标签上定义事件,传入回调函数进行交互<li onClick={() => alert('click)}>Click</li>

由于有事件冒泡和默认事件的影响,我们需要进行额外的处理

1.阻止冒泡

通过接收event参数,调用e.stopPropagation()进行阻止

<button onClick={e => {
        e.stopPropagation()
        onClick();
    }}>
</button>

2.阻止默认事件

当我们在form标签中,或者button是submit状态时,点击button会进行页面刷新

通过接收event参数,调用e.preventDefault()进行阻止

<form onSubmit={e => {
      e.preventDefault();
      alert('提交表单!');
    }}>
    <input />
    <button>发送</button>
</form>

 

数据和响应式 

通过useState这个hook,定义响应式数据const [name, setName] = useState('Karle')

useState()返回一个数组,包含当前state和一个更新state的函数

我们需要将state视为readOnly,不能通过直接赋值的方式进行数据更新

与Vue不同,react没有v-model进行双向绑定。每次更新响应式数据都需要手动调用setState()进行更新,react才会重新渲染

更新对象和数组

不能通过直接赋值的方式进行数据更新(const [state, setState] = useState('000'); state.a = '123'),这将会产生mutation(更新带来的副作用)

我们需要提供一个新的数据,通过setXXX()将原来的state进行更新

const _person = {
    name: 'karle',
    age: 100
    edu:[{},{},{}]
}
const [person, setPerson] = useState(_person)
const updatePersonName = (person) => {
    const nextPerson = {
        ...person,
        name:'Peter'
    }
}

对于数组,我们不能使用改变原数组的方法进行数组操作,如push,pop,splice等。应该接收一个新的被处理后的数组,再通过setXXX()进行更新

const [age, setAge] = useState([1,2,3,4,5,6])
const deletArray5 = (age) => {
    const nextArray = age.filter(a => a!== 5)
    setAge(nextArray)
}

 

使用Context进行状态共享

当我们有多个嵌套组件,其中有些state只有根组件和最后一个组件用到。如果使用props需要一层一层传递是否麻烦,因此有Context进行状态共享。

1.定义Context对象

export const TextContext = createContext({name:'karle',age:12})

2.读取Context对象

import {TextContext} from './TextContext.js'
import {useContext} from 'react'

function A(){
    const text = useContext(TextContext)
    //text = {name:'karle',age:12}
    return ()
}

3.如果要设置状态共享作用域

function App() {
    return (
        <TextContext.Provider value={name:'Peter',age:12}>
            <Father>
                <Son></Son>
            </Father>
        </TextContext.Provider>
    )
}

function Son() {
    return (
        <TextContext.Consumer>
            { person => {
                <p>{person.name}</p>
                <p>{person.age}</p>
            }}
        </TextContext.Consumer>
    )
}

读取Context有两种方式

  1. 通过<XXXContext.Consumer>组件,其中{}内必须使用函数,参数即为定义的共享状态
  2. 通过useContext()钩子,将XXXContext放入参数,返回的即为共享状态

 

用Reducer管理更新状态的逻辑

我们有一个状态,需要对其进行增删改的操作,分别定义了三个handler函数。

这样显得代码十分冗余,于是可以使用Reducer进行管理,减少代码体积和增强可读性可调试性

function handleAddTask(text) {
  setTasks([
    ...tasks,
    {
      id: nextId++,
      text: text,
      done: false,
    },
  ]);
}

function handleChangeTask(task) {
  setTasks(
    tasks.map((t) => {
      if (t.id === task.id) {
        return task;
      } else {
        return t;
      }
    })
  );
}

function handleDeleteTask(taskId) {
  setTasks(tasks.filter((t) => t.id !== taskId));
}

1.将更新状态的逻辑修改成dispatch的一个action

  1.1 移除所有具体逻辑,只剩下三个方法名

  1.2 往方法中写入dispatch()函数,传入一个action对象

    action对象没有规定的结构,其包含你需要操作的数据和当前状态。以及需要表明操作类型如{type:'add'},这里的type和内容都以自己实际开发为准

2.编写reducer函数

state即为当前需要操作的状态,action即为上述action

在该reducer函数中,进行不同的逻辑处理

const myReducer(state, action) {
    const { type } = action
    switch(type) {
        ...
    }
}

3.使用reducer函数

需要用到useReducer()这个钩子,参数为自己定义的reducer函数和state初始化数据,返回响应式状态和dispatch函数

将useState()进行替换

const [tasks, setTasks] = useState({...})
=====>
const [tasks, dispatch] = useReducer(myReducer, {...})

便可照常使用

标签:return,React,person,state,const,JSX
From: https://www.cnblogs.com/karle/p/18025630

相关文章

  • React基础-上
    React目录ReactJSX概念本质JSX场景—JS表达式JSX场景—列表渲染JSX场景—条件渲染JSX场景—复杂条件渲染React事件绑定基础实现使用事件参数(event)传递自定义参数同时传递事件对象和自定义参数React组件概念组件基础使用组件状态管理—useState基础使用状态的修......
  • [转]多端统一框架Taro基础教程(支持转小程序/React Native(安卓/iOS)/鸿蒙)
    原文地址:多端统一框架Taro基础教程-知乎随着微信小程序越来越火,其它平台也都推出了自己的小程序产品(支付宝、快应用、百度、抖音)。小程序最大的特点就是平台能为你提供强大的流量,所以小程序开发变成了前端必会知识。作为一个从来不想写程序,一心只想泡妹子的程序员,我一直期盼......
  • 记录--源码视角,Vue3为什么推荐使用ref而不是reactive
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助ref 和 reactive 是Vue3中实现响应式数据的核心API。ref 用于包装基本数据类型,而reactive用于处理对象和数组。尽管 reactive 似乎更适合处理对象,但 Vue3官方文档更推荐使用 ref。 我的想法,ref就......
  • react 备忘.md.18022871
    useStateuseState是React中一个基本的钩子(Hook),用于在函数组件中添加状态。这个钩子让你能够在不编写类组件的情况下保持组件的内部状态。useCallbackuseCallback是React的一个钩子(Hook),它返回一个记忆化(memoized)的回调函数。这个钩子在某些场景下非常有用,特别是当你需要传......
  • 前端知识回顾概览--React 17+18
    react目前最火的前端框架之一状态管理、路由等一定要重点掌握熟悉常见API,并且有使用经验1.react.js基础react.js简介jsx模版语法及babel编译配置事件/条件渲染/列表渲染等基础用法react.js组件化及生命周期refs及ReactAPI详解create-react-appcli的......
  • 在JavaScript中的防抖函数 - 通过在React中构建自动完成功能来解释
    当你将一个新应用推向生产环境时,你希望确保它用户友好。网站的性能是用户体验的关键部分。每个用户都希望网站及其内容能够快速加载。每一秒都是宝贵的,可能导致用户再也不会访问你的网站。在本指南中,我们将了解JavaScript中一个非常重要的技术,即防抖函数。然后,我将向您展示如何在......
  • REACT 里面的css文件style不显示
    问题现象在App.jsx同路径下的App.css定义中的style不显示,被上面的样式覆盖了。(使用vite创建的REACTapp)分析点击目前应用的样式右上角的style图标定位到,现在的样式是由引入的bootstrap.css定义的,可看到网页html中自定义css在bootstrap.css上面。由于javascript是从上到下编......
  • react引用async异步函数数据渲染
    当需要在React组件中引用异步函数获取的数据时,可以使用useState钩子来存储数据,并在组件渲染时进行处理。下面是一个示例,展示了如何在React中引用异步函数的数据并进行渲染:importReact,{useState,useEffect}from'react';functionMyComponent(){const[data,......
  • react使用判断,显示相关组件----会出现代码,正确的写法是怎样的
    如题,下面的写法,在实际显示的时候,会出现代码constSpeakLoading=(props)=>{return(<RecordLoadingWrapper>props.iatStatus=='ing'&&(<div>正在倾听,请说话</div><imgclassName="recording-img"src={audioImg}alt=&......
  • React中的错误边界处理是指的哪些?
    React中的错误边界处理是指的哪些?在React中,错误边界(ErrorBoundaries)是一种React组件,它能够捕获并处理其子组件树任何位置上抛出的JavaScript错误,并且阻止这些错误导致整个应用崩溃。当一个错误边界内的子组件发生渲染错误、生命周期方法中的错误或其他同步错误时,错误边界会捕获......