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

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>
    <!--关键代码start-->
    <div id="root"></div>
     <!--关键代码end-->

  </body>
</html>

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

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

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

3.函数式编程

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

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

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

4.浏览器调试工具

React developer tools