作为前端最常用的js库之一,熟悉react源码成了高级或资深前端工程师必备的能力,如果你不想停留在api的使用层面或者想在前端技能的深度上有所突破,那熟悉react源码将是你进步的很好的方式。
react的纯粹体现在它的api上,一切都是围绕setState状态更新进行的,但是内部的逻辑却经历了很大的重构和变化,而且代码量也不小,如果只是从源码文件和函数来阅读,那会很难以理解react的渲染流程。优秀工程师几年时间打造的库,必定有借鉴之处,那么我们应该怎样学习react源码呢。
首先,我们可以从函数调用栈入手,理清react的各个模块的功能和它们调用的顺序,盖房子一样,先搭好架子,对源码有个整体的认识,然后再看每个模块的细节,第一遍的时候切忌纠结每个函数实现的细节,陷入各个函数的深度调用中。其次可以结合一些demo和自己画图理解,react源码中设计大量的链表操作,画图是一个很好的理解指针操作的方式。源码里也有一些英文注释,可以根据注释或者根据此react源码解析文章进行理解。
熟悉react源码并不是一朝一夕的事,想精进自己的技术,必须花时间才行。
本教程遵循react v17.0.1源码的核心思想,目的是打造一门通俗易懂的react源码解析系列文章。教程从源码的各个模块开始,结合大量demo、示例图解和视频教程,带着大家一步一步调试react源码,教程也会完全遵循react17手写hook和精简版的react方便大家的理解,随着react大版本的更新,此教程也会一直更新。
为什么要学习react源码呢,你是使用了api很久,停留在框架使用层面还是会主动去了解框架的逻辑和运行方式呢。跟着教程走,理解起来不费力,你将收获:
相信学完教程之后,你对react的理解一定会上升一个档次,甚至会超过大多数面试官了
以下这些问题可能你已经有答案了,但是你能从源码角度回答出来吗。
hooks
状态/生命周期
组件
开放性问题
dom
上么,如果不是绑定在哪里?this
(不是箭头函数的情况)return false
来阻止事件的默认行为?react
怎么通过dom
元素,找到与之对应的 fiber
对象的?解释结果和现象
function Child() {
console.log('Child');
return <div>Child</div>;
}
function Father(props) {
const [num, setNum] = React.useState(0);
return (
<div onClick={() => {setNum(num + 1)}}>
{num}
{props.children}
</div>
);
}
function App() {
return (
<Father>
<Child/>
</Father>
);
}
const rootEl = document.querySelector("#root");
ReactDOM.render(<App/>, rootEl);
相关参考视频讲解:进入学习
function Child() {
useEffect(() => {
console.log('Child');
}, [])
return <h1>child</h1>;
}
function Father() {
useEffect(() => {
console.log('Father');
}, [])
return <Child/>;
}
function App() {
useEffect(() => {
console.log('App');
}, [])
return <Father/>;
}
class App extends React.Component {
componentDidMount() {
console.log('mount');
}
}
useEffect(() => {
console.log('useEffect');
}, [])
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。