目录
学习方式:
1.阅读官方文档
2.跟着下面开始敲代码
1.node -v
2.npm install -g create-react-app 安装脚手架
3.create-react-app my-react
4.cd my-react
5.npm start
运行成功
1.package.json
2.index.js 入口文件
3.app.js 组件引入,写页面的地方
结果:
1.创建cmponents,里面放需要的组件,同样用函数式组件
2.app.js中引入
非常简单,import引入,<Home/>调用即可
app.js父组件
子组件:
结果:
效果展示:
上面都是通过函数式组件来写的,那我们怎么把它变成类组件呢?
首先看一下他们两者的区别:
1.函数组件是一个纯函数，它接收一个props对象返回一个react元素；而类组件需要去继承React.Component并且创建render函数返回react元素。
2、函数组件没有生命周期和状态state，而类组件有。
为了扩展我们这个Home组件,我们现在把home组件变成类组件
写法改变: 「原来」
「现在」:
将props变成this.props
1.为我们当前添加一个按钮, 现在用的是class所以我们使用面向对象,来做一个操作年龄➕的一个事件方法
结果:
「结果」:
举例子:将子组件的age传递给父组件
子组件:
父组件: 
结果:
比如 header 中的值是 兄弟组件中的 定义的
思路: header中的值是父组件传过去的
兄弟组件home把值传给父组件,父组件接收,再传给子组件header
子组件:header.js
兄弟组件:home.js
父组件app.js:
结果:
input 框输入内容之后,外面的值也会相应改变
子组件:
父组件:
结果:
react-hooks hooks称为钩子,钩子函数是一种编程的思想,我们称之为 面向切面编程
(AOP)
1.面向过程编程(一个函数的调用)
2.面向对象编程(以对象为基础(抽象,封装,继承,多态))
3.AOP 面向切面编程(vue.js react ,提供一种生命周期,这些函数就称之为钩子函数,钩子函数的作用就是为了扩充产品的能力,vue暴露钩子函数开放接口给用户,用户可以使用,然后去特定的执行)
4.面向接口编程(api编程),前后端分离的这种形式就是面向接口编程
5.函数式编程(数学的要求很高,要在前端走的很长远,其实是缺少不了的)
那么什么是react的hook呢?
在react中组件分为2大类,1个是函数式组件2.类组件(state,setState)
最大区别:类组件存在自己的状态,函数组件无状态
大家发现函数式组件写起来比较简洁,那么大家希望使用函数式组件编写出类组件
那么可以用函数式组件替代类组件吗?
可以 就使用hook
1.改变状态
2.实现生命周期
