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

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

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

如：

1. <script lang="jsx">
3. const baseTable = [
4.     {name:'Andy', age: 18, id: 1},
5.     {name:'Jack', age: 19, id: 2},
6. ]
8. const handleAdd = () => {
9.     baseTable.push({
10.         id: baseTable.length + 1,
11.         name: `${baseTable.length + 1}-newName`,
12.         age: baseTable.length + 10
13.     })
14.     // 这样操作时，是不会触发React 视图更新的；
15. }
18. export default const MyTable = () => {
19.     return (
20.         <>
21.             <button onClick={handleAdd}>新增</button>
22.         </>
23.     )
24. }
25. export default  MyTable
26. </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 再次渲染组件；
如：

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

复制代码

二、React 中变乱的应用注意事项

1、通常是以 handle 开头的，编程书写风俗，但是为了提高代码的可读性，发起保持良好的编写规范；

1. <script lang="jsx">
2.     const myForm = () => {
3.         const [count, setCount] = useState(0)
4.         const handleAdd = () => {
5.             setCount(count + 1)
6.         }
7.         return (
8.             <>
9.                 <div>修改内容：{name}</div>
10.                 {/* 第一种 */}
11.                 <button onClick={() => handleAdd()}>add1</button>
12.                 {/* 第二种 */}
13.                 <button onClick={() => setCount(count + 1)}>add2</button>
14.                 {/* 第三种，此时 handleAdd 后面 没有 （） 小括号，不然就是方法直接执行了 */}
15.                 <button onClick={handleAdd}>add3</button>
16.             </div>
17.         )
18.     }
19.     export default myForm
20. </script>

复制代码

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

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

1. <script lang="jsx">
2.     // { onSubmit, name } = props 对象
3. const MyButton  = ({ onSubmit, name }) => {
4.     return (
5.         <>
6.             <button type="button" onClick={() =>onSubmit(name)}>{name}</button>
7.         </>
8.     )
9. }
10. export default MyButton;
11. </script>

复制代码

1. // 父组件
2. <script lang="jsx">
3.     import React, { useState } from 'react'
4.     import MyButton from './myButton.jsx'
5.     const MyEvent = () => {
6.         const [ count, setCount ] = useState(0)
7.         const handleSubmit = (data) => {
8.             console.log('submit:', data)
9.             setCount(`${count}_andy`)
10.         }
11.         return (
12.             <>  
13.             {/*
14.             onSubmit 与子组件 props 中的 onSubmit 保持一致
15.             即 等号左侧为 子组件 属性 方法名称；等号右侧为 父组件中的 方法 属性名称
16.             */}
17.                 <MyButton onSubmit={handleSubmit} name={count}>MyButton</MyButton>
18.             </>
19.         )
20.     }
21. export default MyEvent
22. </script>

复制代码

三、React 变乱中处理 制止冒泡和制止默认变乱

利用原生变乱的
e.stopPropagation(); --制止冒泡；
e.preventDefault();–制止默认变乱

1. <script lang="jsx">
2.     const myButton = () => {
3.         const handleSubmit = () => {
4.             console.log('提交了')
5.         }
6.         return (
7.             <button type="button"
8.                 onClick={(e) => {
9.                     {/* 阻止事件冒泡 */}
10.                     e.stopPropagation();
11.                     handleSubmit()
12.                 }}
13.             >
14.                 add
15.             </button>
16.             <button type="button"
17.                 onClick={(e) => {
18.                     {/* 阻止默认事件 */}
19.                     e.preventDefault();
20.                     handleSubmit()
21.                 }}
22.             >
23.                 add
24.             </button>
25.         )
26.     }
28. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。