React第十三节开发中常见问题之（视图更新、变乱处理）
一、视图更新有哪些方案？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 defaultMyTable
</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 = useState([])
const handleAdd = () => {
const curTable = tableData
curTable.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 = 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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]