本章内容
截止到上一节内容,我们就使用 React
实现 TodoList
的功能已经完成。本节内容我们来初步总结一下 React
的一些理论
说到”声明式“开发,我们可能会有疑问,它和以前我们了解的”命令式“开发有什么不一样呢
”命令式“开发:简单来说就是按照命令/指令一步一步实现需求。比如说,现在有个”更改某个 DOM
内容的需求“,那我们就得按照一定的步骤来实现:先找到这个 DOM
(如: document.getElementById('xxx')
), 然后将这个 DOM
的 innerHTML
替换成相应的内容。总之大篇幅的代码都在一步一步操作 DOM
”声明式“开发: 只关注数据层的逻辑,面向”数据“编程。也就是我们只要处理好数据,React
会自动的帮助我们用数据构建 DOM
.
React
只负责 id
为 root
这部分的代码渲染。实践发现,其他部分的代码也可用其他框架(如 Vue
)来实现。ReactDOM.render(<TodoList/>, document.getElementById('root'))
React
最重要的东西之一,它允许将复杂庞大的应用拆成一个一个组件,让开发者更好的管理维护和开发。父组件通过”属性“形式将数据传递给子组件,子组件只能使用这个数据而不能去更改这个数据。如果真的想改变数据,需要调用父组件传递过来的方法,让父组件自己去变更数据
”单向数据流“带来的一个巨大好处就是,可以在开发和调试时避免很多坑。反之如果不是”单向数据流“,那么一个数据出现错误,很难去判断到底是哪个组件改动到这个数据
React
时,我们只需要关注数据层的逻辑即可,其底层帮我实现了跟”视图层“相关的东西在编写 TodoList
案例时,我们的明显的感觉到,使用 React
编程时,我们都在写一个一个的”函数“
函数编程的好处是,可以将各个功能独立封装,结构更加清晰,维护起来更加方便快捷
到此,本章内容结束!