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
个人博客:Karma’s Blog
源码地址:传送门