深入源码分析的好处

  1. 自我成长需要，提升编码能力和技术深度
  2. 学习借鉴，应用到实际项目开发，提高开发效率
  3. 各种操作算法和最佳实践，提升编程功底

源码分析的准备

  1. 下载源码
  2. 安装依赖
  3. IDE打开，例如 webstorm，Vscode
  4. 找到入口文件，一般都是 index.js
  5. 本地调试
  1. 在内存中创建虚拟的DOM元素。来减少对真水DOM的操作从而提升性能
  2. JSX 即Javascript XML，它是对JavaScript 语法扩展。React 使用 JSX 来替代常规的 JavaScript
  3. DOM类型的标签，标签的首字母小写
  4. React组件类型的标签需要首字母大写。React也是通过首字母的大小写来判断渲染的是哪种类型的标签
    1. JSX表达式的，将表达式写到 {} 内即可
    2. JSX当中，是不能使用if else 的，不过可以使用三元运算表达式

react源码分析资料 https://react.jokcy.me/
手写 react hooks https://www.yuque.com/lijiangpeng/fiurgq
hooks源码分析 https://www.yuque.com/qqhh/react/sgorvu
https://github.com/KieSun/awesome-frontend-source-interpretation
https://react.jokcy.me/

react核心

  1. 单向数据流
    1. 数据与界面绑定
    2. 单向渲染，数据改变就重新渲染
    3. 就好像一个函数，同样的输入，同样的输出
  2. 组件化
    1. 独立，完整，自由组合
    2. 让组件独立出来，具备完成的独立功能，可插拔
    3. 保持组件的一致性，UI的一致性
  3. 虚拟DOM

jsx语法

  1. JSX的基本语法和XML语法相同，都是使用成对的标签构成一个树状结构的数据
  2. 标签类型
    1. DOM类型的标签（div、 span等），首字母必须小写
    2. React组件类型的标签，组件名称的首字母必须大写；二者可以互相嵌套使用
    3. React 通过首字母的大小写判断渲染的是一个DOM类型的标签还是一个React组件类型的标签
  3. JSX中使用JavaScript表达式需要将表达式用大括号“{}”包起来
    1. JSX中只能使用JavaScript表达式，而不能使用多行JavaScript 语句
    2. 可以使用三元运算符或逻辑与（&&）运算符代替if语 句的作用
  4. JSX的优点
    1. 快，执行速度更快，因为它在编译为JavaScript代码后进行了优化
    2. 可以使用熟悉的语法仿照HTML来定义虚拟DOM。从而编写模板更加简单快速

标签属性

  1. class 要写成className
    1. class是JavaScript的关键 字，所以改成className
  2. 事件属性名采用驼峰 格式，例如onclick 要写成 onClick
    1. React对DOM标签支持的事件重新做了封装， 封装时采用了更常用的驼峰命名法命名事件
  3. htmlFor 代替 for属性
  4. 当JSX标签是React组件类型时，可以任意自定义标签的属性名
    1. 不能传递 key属性
  1. const element = (
  2.   <div>
  3.          <h1>Hello, world!</h1>
  4.   </div>
  5. )
  7. // 错误的语法
  8. const element = <MyComponent foo={const val = 1 + 2; return val; } />
  10. const element = (
  11.     <>
  12.       {
  13.       if(complete){
  14.         return <CompletedList />;
  15.       }
  16.       else{
  17.         return null
  18.       }
  19.     }
  20.   </>
  21. )
  23. // 组件自定义属性               
  24. <User name='React' age='4' address='America' />

a标签安全链接

rel=”noopener noreferrer”

  1. <Menu>
  2.   <Menu.Item>
  3.     <a 
  4.       rel="noopener noreferrer" 
  5.       href={null}
  6.       onClick={onDelete}
  7.       >删除</a>
  8.   </Menu.Item>
  9. </Menu>
  12. // Button a标签新窗口打开
  13. <Button
  14.   type="link"
  15.   href="/list"
  16.   target="_blank"
  17.   rel="noopener noreferrer"
  18.   >
  19.   新增
  20. </Button>
  22. <a 
  23.   href="https://www.google.com/search?q=antd" 
  24.   target="_blank" 
  25.   rel="noopener noreferrer"
  26. >
  27.   新增
  28. </a>

jsx的本质是什么

  1. React.createElement()
    1. 组件 & 标签
    2. 属性
    3. 子元素
  2. 组件名大写，html标签小写
  3. JSX语法只是 React.createElement (component, props, …children)的语法糖
    1. 所有的JSX 语法最终都会被转换成对这个方法的调用
    2. jsx创建界面元素更加清晰简洁， 在项目使用中应该首选JSX语法 ```jsx React.createElement(List, { list: list })

React.createElement(‘ul’, null, list.map((item, index) => { return React.createElement(‘li’, { key: item.id }, item.title) }))

  4. <a name="a21AE"></a>
  5. ## jsx渲染
  7. 1. 变量 & 表达式
  8. 2. if-else语句
  9. 3. 三元运算 ternary operator
  10. 4. 逻辑 &&
  11. 5. switch case
  12. 6. 枚举 enums
  13. 7. 多层条件渲染 multi-level conditional reandering
  14. 8. 高阶组件
  19. <a name="pKdYZ"></a>
  20. ## jsx多个属性
  22. 1. 把多个属性声明成一个对象，用 ... 展开运算符添加到标签或组件上
  23. ```jsx
  24. const attrs = {
  25.   href: 'http://example.org',
  26.   target: '_blank',
  27. };
  28. <a {...attrs}>Hello</a>
  31. // 等价于
  32. const attrs = {
  33.   href: 'http://example.org',
  34.   target: '_blank',
  35. };
  36. <a href={attrs.href} target={attrs.target}>Hello</a>

props.children

  1. this.props.children属性。表示组件的所有子节点
  2. React.Children 来处理 this.props.children
    1. React.Children.map 来遍历子节点
    2. 不用担心 this.props.children的数据类型是 undefined 还是 object
      1. <App>
      2. <Link>UI</Link> // 在 App组件中可以通过 this.props.children来获取 Link
      3. </App>

jsx常见错误

函数作为React子组件无效

  1. Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
  2. 方法（函数）作为一个React子组件是无效的，出现这种情况可能是因为:
    1. 你return一个组件时，错写成Component而不是写成
    2. 或许你想调用这个函数而不是 return
  3. 解决：如果是对象格式，值不能是函数，必须是个React组件
    1. const footer = {
    2.  action: () => <View />, // 报错
    3.  action: <View /> // 正确的写法是组件
    4. }

render错误

  1. react-dom.development.js:14815 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.