如何新建一个网站,河南省教育厅官方网站师德建设,做网站优化的工资有多高,小伟破解WordPress主题借鉴自极客时间《React Hooks 核心原理与实战》
JSX语法的本质
可以认为JSX是一种语法糖#xff0c;允许将html和js代码进行结合。 JSX文件会通过babel编译成js文件 下面有一段JSX代码#xff0c;实现了一个Counter组件
import React from react;export defau…借鉴自极客时间《React Hooks 核心原理与实战》
JSX语法的本质
可以认为JSX是一种语法糖允许将html和js代码进行结合。 JSX文件会通过babel编译成js文件 下面有一段JSX代码实现了一个Counter组件
import React from react;export default function Counter() {const [count, setCount] React.useState(0);return (divbutton onClick{() setCount(count 1)}{count}/button/div);
}这段代码也可以形成js
React.createElement(div,null,React.createElement(button,{ onClick: function onClick() {return setCount(count 1);} },React.createElement(CountLabel, { count: count }))
);用到了React的一个apiReact.createElement它的作用是创建组件的实例。这个api的参数
第一个参数组件类型内置组件对应于html元素为小写自定义组件为大写驼峰第二个参数为组件添加的属性即props第三个及以后的参数该组件的children
所以呢通过 createElement 这个 API我们可以构建出需要的组件树而 JSX 只是让这种描述变得更加直观和高效。 因此JSX 不是一个新的概念而只是原生 JavaScript 的另一种写法。但是换成这种写法会大大降低你上手 React 的难度。
React组件的本质
从modelstateprops到 view的映射 React 会帮助你处理所有 DOM 变化的细节。而且当 Model 中的状态发生变化时UI 会自动变化即所谓的数据绑定。 把UI的展现看做是函数的执行
f(变化的model) 新的dom树然后把新的dom树以最优的方法更新到浏览器为什么要发明 Hooks
Class组件有不适合的地方浪费了类的两个特点1. 不需要人为调用Class实例的方法这个Class的特点就浪费了 2. React的类之间没有继承这个特点也浪费了。 函数组件也有不合适的地方1. 没有自己的生命周期2. 函数自身无法记录状态
我们想要强化函数组件让它能有状态让它关联到一个存储在外部的状态那么Hooks的思想就诞生了
把一个外部的数据绑定到钩到函数的执行。
当被钩到的数据或事件发生变化时产生这个目标结果的代码会重新执行产生更新后的结果。
对于函数组件这个结果是最终的 DOM 树有一点需要特别注意Hooks 中被钩的对象不仅可以是某个独立的数据源也可以是另一个 Hook 执行的结果这就带来了 Hooks 的最大好处逻辑的复用。
hooks的过人之处
1 逻辑复用
或者说是简化了逻辑复用 以往的一些逻辑复用需要借助高阶组件来完成这是一个复杂的设计模式但是hooks就能简化这一过程。 举个例子 调整窗口大小 a. 高阶组件方法 高阶组件实现思路高阶组件负责监听窗口大小变化并将变化后的值作为 props 传给下一个组件。
// 组件为参数最后返回一个包装过的组件
const withWindowSize Component {// 产生一个高阶组件 WrappedComponent只包含监听窗口大小的逻辑class WrappedComponent extends React.PureComponent {constructor(props) {super(props);this.state {size: this.getSize() };}// 组件生命周期对应状态 挂到window的listener上componentDidMount() {window.addEventListener(resize, this.handleResize);}componentWillUnmount() {window.removeEventListener(resize, this.handleResize);}// 获取当前window的sizegetSize() {return window.innerWidth 1000 ? large : small;}handleResize () {const currentSize this.getSize();this.setState({size: this.getSize()});}render() {// 将窗口大小传递给真正的业务逻辑组件return Component size{this.state.size} /}}return WrappedComponent;
};然后在自定义组件中调用withWindowSize 这样的函数来产生一个新组件并自带size属性例如
class MyComponent extends React.Component {render() {const {size} this.props;if(size small) return SmallComponent /;else return LargeComponent /;}
}
// 使用 withWindowSize 产生高阶组件用于产生 size 属性传递给真正的业务组件
export default withWindowSize(MyComponent)因为size是props中得到的即是从父组件传递下来的所以当WrappedComponent组件中监听到窗口变化时会更新size的值从而会让MyComponent重新渲染
高阶组件的缺点
代码难理解不直观很多人甚至宁愿重复代码也不愿用高阶组件增加额外的组件节点。每一个高阶组件都会多一层节点这就会给调试带来很大的负担。
那么用hooks如何实现? b. hooks方法 const useWindowSize () {const [size, setSize] useState(getSize());useEffect(() {const handler () { setSize(getSize()); }window.addEventListener(resize, handler);// 回调函数可以返回一个清理函数。这个清理函数在组件卸载时或者在下一次 effect 执行之前执行return () {window.removeEventListener(resize, handler);};}, []); // 空的依赖项数组意味着此效果只会运行一次类似于类组件中的 componentDidMountreturn size;
}在组件中使用useWindowSize
const Demo () {const size useWindowSize();if (size small) return SmallComponent /;else return LargeComponent /;
}窗口大小是一个外部的数据状态但我们通过Hooks的方式对其进行了封装将其变成一个可绑定的数据源。每当窗口大小发生变化时使用这个Hook的组件就会重新渲染。当窗口大小改变时注册的事件监听器会触发并调用 handler 函数该函数会更新 size 状态的值。在 Demo 组件中根据 size 的值来决定渲染 SmallComponent 还是 LargeComponent。当 size 的值在窗口大小变化时被更新后会触发组件的重新渲染因为组件的渲染取决于 size 的值
2 有助于关注分离
Hooks能够将针对同一个业务逻辑的代码尽可能聚合在一块儿让代码更容易理解和维护相比之下Class组件无法做到这一点因为Class组件中不得不把同一个业务逻辑的代码分散在类组件的不同生命周期方法中。 举个例子上面的窗口大小变化监听代码 Class组件中我们在componentDidMount 和componentWillUnmount中分别去监听事件和解绑事件 而在函数组件中就可以把逻辑都集中写在hooks里
Hooks所解决的问题是什么
更好地体现了React的开发思想即 State View 的函数式映射更好地解决了 Class 组件存在的一些代码冗余、难以逻辑复用的问题
