React进阶-单项数据流和其他

r囧r小猫 2022-12-13 04:13 76阅读 0赞

#### 1.单项数据流 ####

React的特性中有一个概念叫做“单项数据流”，以以上练习的Demo讲解。比如我们在父组件中可以直接把`this.state.list`传递过来。

<ul>
        { 
            this.state.list.map((item,index)=>{ 
                return (
                    <SmailSmailGirl 
                    key={ index+item}  
                    content={ item}
                    index={ index}
                    list={ this.state.list}
                    deleteItem={ this.deleteItem.bind(this)}
                    />
                )
            })
        }
    </ul>

其实这样传是没有问题的，问题是你只能使用这个值，而不能修改这个值，如果你修改了，比如我们把代码写成这样：

handleClick(){ 
        //关键代码——---------start
        this.props.list=[]
        //关键代码-----------end
        this.props.deleteItem(this.props.index)
    }

就会报下面的错误；

TypeError: Cannot assign to read only property 'list' of object '#<Object>'

意思就是`list`是只读的，单项数据流。

#### 2.和其他框架配合使用 ####

`React`和`jquery`能一起使用吗？

答案：是可以的，React其实可以模块化和组件化开发。看`/public/index.html`文件，代码如下：

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
    
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
        <title>React App</title>
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        
        <div id="root"></div>
         
    
      </body>
    </html>

其实React只对这一个`<div>`,外边的其他DOM并不受任何影响，比如我们在它的下方再写一个`<div>`，然后查看效果。

<div id="root"></div>
    <div style="color:red">今天过的好开心，服务很满意！</div>

你可以在其他的div里加入任何内容，但是这种情况很少，我也不建议这么使用。

#### 3.函数式编程 ####

函数式编程的好处是什么？

1.  函数式编程让我们的代码更清晰，每个功能都是一个函数。
2.  函数式编程为我们的代码测试代理了极大的方便，更容易实现前端自动化测试。

React框架也是函数式编程，所以说优势在大型多人开发的项目中会更加明显，让配合和交流都得心应手。

#### 4.浏览器调试工具 ####

React developer tools

个人博客：[Karma’s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/10/09/29%20React%E8%BF%9B%E9%98%B6-%E5%8D%95%E9%A1%B9%E6%95%B0%E6%8D%AE%E6%B5%81%E5%92%8C%E5%85%B6%E4%BB%96/
[Link 1]: https://github.com/kay-520/React_study