Hooks
React新的API最新支持Hooks版本为16.7,需要单独安装
那么开始
- 在 https://codesandbox.io/上新建一个react项目
- 在Dependencies上能看到React的版本(hooks的支持要求16.7.0-alpha)
修改package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19"dependencies": {
"react": "16.7.0-alpha",
"react-dom": "16.7.0-alpha",
"react-scripts": "2.0.3"
},
//此时保存报错了
// 在命令行查看react的所有版本
npm info react versions
// 查看最新版本
npm info react versions
//再次修改 package.json
"dependencies": {
"react": "16.7.0-alpha.2",
"react-dom": "16.7.0-alpha.2",
"react-scripts": "2.0.3"
},开始写我们的react应用 index.js
1
2
3
4
5
6
7
8
9import React from "react";
import ReactDOM from "react-dom";
function App() {
return <div className="App">hello</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
useState使用
有状态的函数组件
16.7以前只有class组件有状态,16.7开始,函数是可以有状态的
index.js
1 | import React from "react"; |
核心代码
1 | const [ |
自从有了useState之后,就不需要一个class去维护状态
- 直接 useState(初始值)
- setCount(count+1) / setCount(count -1) 就可以改变状态
而如果用之前的class组件写法是这样的
1 | // 用 class写组件 |
结论就是:
- 用了hooks 之后语法简介了很多
- 再也不用class的方式写组件了
- 注意要将react升级到16.7.0
- 同时这里可以很爽的给数据赋值,不用setState了
useState的更多例子
复杂对象如何修改值?
1 | import React from "react"; |
user添加爱好 hobbies
1 | import React from "react"; |
删除 hobbies第二项怎么处理
1 | import React from "react"; |
以上就是hooks的基本使用
疑问?能不能将 const [count, setCount] = useState(0) 放在函数组件外
- 这是API没有告诉我们的,会报错
- 没有为什么,就是不准
疑问2 能不能修改 const [count, setCount] = useState(0) 名字
- 可以
1 | const [x, y] = useState(0) |
useEffect使用
1 | //没有作用的函数 |
如果你在函数里看到了 不知道从哪里来的东西 这个函数就是有副作用的函数
- 因为它依赖了不知道从哪里来的东西
1 | // 来看什么是副作用 |
什么情况下用 effect
在 index.html 里添加一个节点元素 id=box1
1 | <div id="box1" style="border:1px solid red;"></div> |
index.js
1 | import React from "react"; |