当前位置：首页 > news >正文

React第十三节开发中常见问题之（视图更新、事件处理）

news 2025/7/16 8:21:17

一、视图更新有哪些方案？

useState用法介绍

1、对于数据变量 `正常的增删改查`，只会让数据更新，但是不会触发 `React 视图`的更新；

如：

<script lang="jsx">const baseTable = [{name:'Andy', age: 18, id: 1},{name:'Jack', age: 19, id: 2},
]const handleAdd = () => {baseTable.push({id: baseTable.length + 1,name: `${baseTable.length + 1}-newName`,age: baseTable.length + 10})// 这样操作时，是不会触发React 视图更新的；
}export default const MyTable = () => {return (<><button onClick={handleAdd}>新增</button></>)
}
export default  MyTable
</script>

2、为什么会出现这种情况？

2.1、局部变量无法在多次渲染中持久保存。当 React 再次渲染这个组件时候，他会从头开始渲染，并不会考虑之前对局部变量的任何更改；
2.2、更改局部变量不会触发渲染。React 没有意识到它需要使用新数据重新渲染组件；

3、如何解决？要做到如下两点

3.1、保留渲染之前的数据
3.2、触发 React 使用新数据渲染组件-达到重新渲染的效果

4、React 内部自带 `Hook useState` 提供解决方案

4.1、State 变量用于保存渲染之间的数据。
4.2、State setter 函数更新变量并且触发 React 再次渲染组件；

如：

<script lang="jsx">import React, { useState } from 'react// 比如写一个列表const Table = () => {// useState() 返回 的第一个参数是初始值，第二是更改初始值的方法；const [tableData, setData ] = useState([])const handleAdd = () => {const curTable = tableDatacurTable.push({id:1, name: 'Andy', age: 18})// 通过 setData 修改初始值，并且更新视图// 需要浅拷贝的方式获取数据并修改// 对于react 来说 引用类型的都是地址，没有重新赋值（地址没有改变），故不会更新视图setData([...curTable])}const Itmes = tableData && tableData.map(itm =>return (<li key={itm.id} onClick={() => handleEdit(itm)}>{itm.name}</li>))return (<><ul><Itmes></Itmes></ul></ul>)}
</script>

二、React 中事件的应用注意事项

1、通常是以 `handle 开头`的，编程书写习惯，但是为了提高代码的可读性，建议保持良好的编写规范；

<script lang="jsx">const myForm = () => {const [count, setCount] = useState(0)const handleAdd = () => {setCount(count + 1)}return (<><div>修改内容：{name}</div>{/* 第一种 */}<button onClick={() => handleAdd()}>add1</button>{/* 第二种 */}<button onClick={() => setCount(count + 1)}>add2</button>{/* 第三种，此时 handleAdd 后面 没有 （） 小括号，不然就是方法直接执行了 */}<button onClick={handleAdd}>add3</button></div>)}export default myForm
</script>

2、事件`处理函数` props 应该以 `on`开头，后面跟一个大写字母即`驼峰命名`；

必须传递事件处理函数，而非函数调用！ onClick={handleClick} ，不是 onClick={handleClick()}。

子组件

<script lang="jsx">// { onSubmit, name } = props 对象
const MyButton  = ({ onSubmit, name }) => {return (<><button type="button" onClick={() =>onSubmit(name)}>{name}</button></>)
}
export default MyButton;
</script>

// 父组件
<script lang="jsx">import React, { useState } from 'react'import MyButton from './myButton.jsx'const MyEvent = () => {const [ count, setCount ] = useState(0)const handleSubmit = (data) => {console.log('submit:', data)setCount(`${count}_andy`)}return (<>  {/* onSubmit 与子组件 props 中的 onSubmit 保持一致 即 等号左侧为 子组件 属性 方法名称；等号右侧为 父组件中的 方法 属性名称*/}<MyButton onSubmit={handleSubmit} name={count}>MyButton</MyButton></>)}
export default MyEvent
</script>

三、React 事件中处理 `阻止冒泡`和`阻止默认事件`

利用原生事件的
e.stopPropagation(); --阻止冒泡；
e.preventDefault();–阻止默认事件

<script lang="jsx">const myButton = () => {const handleSubmit = () => {console.log('提交了')}return (<button type="button"onClick={(e) => {{/* 阻止事件冒泡 */}e.stopPropagation();handleSubmit()}}>add</button><button type="button"onClick={(e) => {{/* 阻止默认事件 */}e.preventDefault();handleSubmit()}}>add</button>)}</script>