组件
如果我们写一个功能复杂的页面,都写在 js 里,那么你的文件将会变成下面这个样子:
render
函数里面将会有一坨的代码,非常不优雅
但是此时就有一个奇怪的现象,为什么同样的 html
代码写在 html
文件里面就不会觉得丑呢?
因为国际惯例认为习惯, js
文件一般不会这么复杂,所以产生了组件的概念。
我们把代码分开(为做演示,先暂时放在一个文件里面)
但是此时遇到一个 bug
当我点击 ➕1
的时候,两个组件同时加了1:
让我们来整理一下逻辑:点击 ➕1
以后,变量 number
加1,接着执行 render
函数,box1
和 box2
同时重新渲染,因为用的同一个变量 number
所以结果就是两个组件同时加上了1。
所以我们试试给他们两个组件各自的变量和函数。
虽然解决了 “bug”, 但是变成了这个样子,代码已经惨不忍睹了(全局变量太多了)。
此时能不能用函数传参试试呢,在 react
里面也就是 props
,
让我们先试试用函数传参把~
我们给这两个组件各自的名字
通过函数传参,我们分别给这两个组件各自的名字,
这也就是 react
另一个聪明之处,他把属性理解为对象的key和value,与js的对象完美对应起来了,
既然可以传 n ame
了,那我们能不能现在传 number
呢?
答案是不行。因为
react
规定,永远不要试图去改变别人船费你的props
。
但是这该怎么办呢?我们怎么优雅的给这两个组件各自的 number
呢?
Class
js 里面有什么东西又能满足函数的功能,又可以有自己的作用域、变量 呢
于是这里就用上了 class
试图用 class
改写刚刚的代码
react
规定,变量必须放在this.state
里面,更改变量必须通过this.setState
方法,否则无法自动更新dom。
注意
this.setState
有可能是异步的,所以你无法像这样写➕2
的代码clickAdd(){ this.setState({ number: this.state.number + 1 }) this.setState({ number: this.state.number + 1 }) }
此时你应当使用
this.setState
的回调函数形式this.setState({ number: this.state.number + 1 }) this.setState((state) =>{ return { number: state.number + 1 } })
本文完。
网友评论