课程名称
课程章节
第3章 React基础精讲
- 3-7 围绕 React 衍生出的思考
课程讲师
课程内容
- 围绕React衍生出的思考
- 声名式开发方式
- 可以与其他框架并存
- 组件化
- 单向数据流
- 视图层的框架
- 函数式编程
课程收获
掌握React的声名式开发方式 =>
与它相对的是命令式的开发方式，之前使用jquery开发，都是直接操作dom，它就是命令式的编程（包括原生js开发）。即创建一个页面后，一点点地告诉dom，要怎么挂载，要怎么做。命令式的开发，其实60%～70%都在操作dom。
假设我们盖一栋楼（理解为一个网页），命令式的开发其实就是告诉这栋楼一步一步地怎么盖，先盖什么后盖什么，每一步都需要关心，React是面向数据编程的，我们所做地就是把数据构建好，就好了！React会帮助我们自动地对数据进行构建网站，这个数据就是盖房子地图纸，当把图纸绘制好了，React会自动结合这张图纸，帮助我们构建这栋大厦（构建dom）。
声明式的开发，会帮助我们节约掉大量的dom操作，这就是React框架带来的巨大的一个优势。
React可以与其他框架并存
可以同时用jquery、Vue、angular这些框架，这些框架可以完美的并存。怎么做到这些框架公共使用，React不去影响其他框架的代码呢？
React实际只去管理id的root的div标签里的各种各样dom的渲染，如果在index.html增加其他dom节点，这些节点则与React一点关系都没有。可以引入其他框架，操作除id等于root的其他节点即可。因此React与其他框架是可以做到完美共存的。（当然也需要做到其他框架不影响React。）
import React from 'react';
import ReactDOM from 'react-dom/client';
import TodoList from './TodoList';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<TodoList />
</React.StrictMode>
);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
掌握React组件化
React是一种组件化的开发形式，通过Class去继承React.Component定义组件。
如何区分页面上到底是一个组件还是一个元素？在Jsx语法中，开头字母是小写的一般是h5的标签，组件首字母开头大写。
组件在整个应用中应该是一个树状的结构，组件之间的传值，父组件通过props向子组件传递数据，子组件想操作父组件，父组件向子组件传递一个方法，子组件调用该方法，间接的操作父组件的数据，从而实现父组件向子组件的通讯，这也是面试中经常问到的问题。（React中，父子组件如何通讯？）
掌握React单向数据流
父组件TodoList向子组件TodoItem传递里一个content、index，子组件在做删除的时候，不就是改变state中的list数据吗？直接修改父组件的list不行吗？这是不行的，React要求我们开发要有单向数据流的概念。
即：
父组件可以给子组件传数据，但是子组件只可以使用，而不能修改父组件传递的数据。一旦去修改，其实React会报错的。
list = {this.state.list} 直接传递list
TodoList.js
getTodoItem(){
return this.state.list.map((item,index) => {
return <TodoItem
key={index}
content = {item}
index = {index}
list = {this.state.list}
deleteItem = {this.handleDelItem}
/>
})
}
this.props.list = []; 直接修改list内容，置空。
TodoItem.js
handleClick(){
const {deleteItem,index} = this.props;
this.props.list = [];
deleteItem(index);
}
报错：list是一个只读的属性，这其实就是React中单项数据流的概念。
单项数据流：父组件传递数据给子组件，只能单向传递，而不能反过来修改。它其实是为了后续开发和测试方便，不容易遇到坑。假设一个父组件中有五个子组件，可以把state中的list传递给五个子组件，假设React没有单项数据流，假设一个组件直接修改了父组件的list，那其他四个子组件都会发生变化，假设现在发生了bug，也不好定位到底是哪个子组件发生了问题。
子组件就是想操作父组件的数据，那就靠父组件传递的方法吧，子组件去调用父组件的方法做操作。最终其实还是父组件调用自己的方法去改变自己的数据，这样就比较好维护，一旦代码出了问题，肯定是父组件的该方法出了问题，那么也有好维护了。
掌握视图层的框架
React为啥不把自己定义成一个大型的框架，仅仅是一个视图层框架呢？
父子组件可以通过属性的方式传值，假设一个项目极其的复杂，组件肯定很复杂会形成一个组件树。假设第一层组件和第二层的组件进行通讯，会很容易。
假设紫色的组件与右上角的组件通讯，就很复杂了，紫色组件需要把数据层层父级传递，传递给顶层父组件，然后再往下传，会非常麻烦。要是大型组件，这样就疯了，很多代码都非常冗余，本来就是两个组件的通讯，导致中间一顿组件都需要参与进来。
因此大型项目，光用React是不行的，还需要配合一些数据层的框架，帮助我们解决React中组件之间，复杂的传值问题。因此React就把自身定义为一个视图层的框架了，并不是什么问题都解决，只帮助你解决数据和页面渲染上的问题，至于组件之间的传值并不负责。小型项目，可以仅仅使用React，但大型项目中是不够的，比如Redux这种数据层框架，辅助我们开发。
掌握函数式编程
当我们在写React代码时，实际上写的都是一个个函数。函数式编程地好处，首先维护起来非常容易，当一个函数很大的时候，可以进行拆分， 每一个函数各司其职。
还有就是，在前端里头其实还有一个面向测试的开发流程，很多前端项目已经引入了自动化测试的概念。在做前端自动化测试的时候，如果一个项目之中，代码都是由一个个函数组成的话，在做自动化测试的时候，就会非常容易的进行了。只需要给函数一个输入值，只需要看它的输出是否符合我们的预期，就能知道这个函数是否运行的正确了。它给前端自动化测试，带来了便捷性。
随时随地看视频
