master

分支 (1)

管理

管理

master

react-lesson1-2022
/
01-从零开始学习React.html

<!DOCTYPE html>
<html>

<head>
  <title>从零开始学习React</title>
  <meta charset='utf-8'>
  <link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'>
  <style>
    #preview-contents {
      margin-top: -20px;
    }
  </style>
</head>

<body>
  <div id='preview-contents' class='note-content'>
    <h3 id="从零开始学习react">从零开始学习React</h3>
    <blockquote>
      <p>React是目前Web前端开发最流行的框架之一，起源于Facebook的内部项目，该公司对市场上所有JavaScript MVC框架都不满意，决定自行开发一套！于2013年5月开源！ <br>
        <a href="https://react.docschina.org/" target="_blank">https://react.docschina.org/</a>
      </p>
      <p>前端主流框架：</p>
      <ul>
        <li>
          <p>react：MVC</p>
        </li>
        <li>
          <p>vue：MVVM</p>
        </li>
        <li>
          <p>angular：MVC或者MVVM</p>
        </li>
      </ul>
      <p>在接下来的课程中，我们在讲解React的同时，会：</p>
      <ul>
        <li>
          <p>对比vue2/3，从细节上去分析二者的相同和不同</p>
        </li>
        <li>
          <p>对比React18和原始版本的一些区别</p>
        </li>
        <li>
          <p>讲解基础知识的同时，深入内部核心原理</p>
        </li>
        <li>
          <p>用更多实战和专业的开发思想，不断强化React的应用</p>
        </li>
      </ul>
    </blockquote>

    <p><strong>课程大纲-概要「V1版本」</strong> <br>
      <code>围绕React本身及其核心生态</code>
    </p>
    <ul>
      <li>
        <p>使用 create-react-app 构建React工程化项目</p>

        <ul>
          <li>
            <p>create-react-app的基础使用</p>
          </li>
          <li>
            <p>修改默认webpack配置项</p>
          </li>
          <li>
            <p>配置优化&amp;兼容处理</p>
          </li>
          <li>
            <p>…</p>
          </li>
        </ul>
      </li>
      <li>
        <p>React基础知识</p>

        <ul>
          <li>
            <p>MVC &amp; MVVM</p>
          </li>
          <li>
            <p>全面拥抱JSX</p>
          </li>
          <li>
            <p>JSX底层渲染机制</p>
          </li>
          <li>
            <p>DOM-DIFF</p>
          </li>
          <li>
            <p>合成事件</p>
          </li>
          <li>
            <p>…</p>
          </li>
        </ul>
      </li>
      <li>
        <p>React中的组件化开发</p>

        <ul>
          <li>
            <p>纯函数组件</p>

            <ul>
              <li>
                <p>属性规则校验</p>
              </li>
              <li>
                <p>仿vue中slot插槽的处理</p>
              </li>
              <li>
                <p>…</p>
              </li>
            </ul>
          </li>
          <li>
            <p>类组件</p>

            <ul>
              <li>
                <p>Component和PureComponent /pjʊə(r)/</p>
              </li>
              <li>
                <p>state状态及更新</p>
              </li>
              <li>
                <p>进阶setState</p>
              </li>
              <li>
                <p>生命周期函数</p>
              </li>
              <li>
                <p>ref</p>
              </li>
              <li>
                <p>…</p>
              </li>
            </ul>
          </li>
          <li>
            <p>React Hooks组件</p>

            <ul>
              <li>
                <p>useState</p>
              </li>
              <li>
                <p>useContext</p>
              </li>
              <li>
                <p>useRef</p>
              </li>
              <li>
                <p>useCallback</p>
              </li>
              <li>
                <p>useEffect</p>
              </li>
              <li>
                <p>…</p>
              </li>
            </ul>
          </li>
          <li>
            <p>组件通信的常规方案</p>

            <ul>
              <li>
                <p>父子通信</p>
              </li>
              <li>
                <p>祖先和后代通信</p>
              </li>
              <li>
                <p>平行组件通信</p>
              </li>
              <li>
                <p>…</p>
              </li>
            </ul>
          </li>
          <li>
            <p>高阶组件及运用</p>
          </li>
          <li>
            <p>Suspense 异步组件</p>
          </li>
        </ul>
      </li>
      <li>
        <p>基于redux和react-redux构建“公共状态管理”机制</p>

        <ul>
          <li>
            <p>redux基础和工程化</p>
          </li>
          <li>
            <p>react-redux的应用</p>
          </li>
          <li>
            <p>redux中间件</p>
          </li>
          <li>
            <p>深入redux和react-redux核心</p>
          </li>
          <li>
            <p>mobx</p>
          </li>
          <li>
            <p>…</p>
          </li>
        </ul>
      </li>
      <li>
        <p>基于react-router-dom构建前端路由机制</p>

        <ul>
          <li>
            <p>SPA &amp; MPA</p>
          </li>
          <li>
            <p>Hash路由和History路由的底层机制</p>
          </li>
          <li>
            <p>router V5的基础运用</p>
          </li>
          <li>
            <p>router V6的基础运用</p>
          </li>
          <li>
            <p>路由跳转及传参</p>
          </li>
          <li>
            <p>…</p>
          </li>
        </ul>
      </li>
      <li>
        <p>Antd和AntdMobile组件库</p>

        <ul>
          <li>
            <p>基础运用</p>
          </li>
          <li>
            <p>核心组件：表单、table、文件上传等</p>
          </li>
          <li>
            <p>…</p>
          </li>
        </ul>
      </li>
      <li>
        <p>React综合实战开发</p>

        <ul>
          <li>
            <p>PC端：cms管理系统系统</p>
          </li>
          <li>
            <p>移动端：知乎日报WebApp</p>
          </li>
          <li>
            <p>如何从零构建React项目</p>
          </li>
          <li>
            <p>打造属于React的路由表、路由懒加载、动态路由、导航守卫等</p>
          </li>
          <li>
            <p>样式私有化管理方案</p>
          </li>
          <li>
            <p>keep-alive</p>
          </li>
          <li>
            <p>组件封装、UI组件库的二次封装等</p>
          </li>
          <li>
            <p>项目优化</p>
          </li>
          <li>
            <p>专业解决方案：登录态、权限、数据缓存等</p>
          </li>
          <li>
            <p>React项目中常用的插件</p>
          </li>
          <li>
            <p>…</p>
          </li>
        </ul>
      </li>
    </ul>

    <p><strong>课程大纲-设想「V2版本」</strong> <br>
      <code>围绕React专业化实战、进阶、扩展和周边</code>
    </p>
    <ul>
      <li>
        <p>淘系React框架和解决方案</p>

        <ul>
          <li>
            <p>redux-saga和dva解决方案</p>
          </li>
          <li>
            <p>淘系React框架：umi</p>
          </li>
          <li>
            <p>Ant Design Pro 企业级中后台前端/设计解决方案</p>
          </li>
        </ul>
      </li>
      <li>
        <p>基于 vite + typescript + react 的新解决方案</p>
      </li>
      <li>
        <p>基于 Taro 构建多端应用</p>
      </li>
      <li>
        <p>基于 React Native 构建移动端应用</p>
      </li>
      <li>
        <p>基于 next.js 的React SSR</p>
      </li>
      <li>
        <p>…</p>
      </li>
    </ul>

    <p>欢迎各位同学提供一些好的建议、好的项目、或者想要去学习的内容，我们共同成长！！</p>

    <hr>

    <h4 id="使用-create-react-app-构建react工程化项目">使用 create-react-app 构建React工程化项目</h4>
    <p>安装create-react-app <br>
      <code>$ npm i create-react-app -g 「mac需要加sudo」</code>
    </p>
    <p>基于脚手架创建项目「项目名称需要符合npm包规范」 <br>
      <code>$ create-react-app xxx</code>
    </p>
    <pre class="prettyprint hljs-dark"><code class="hljs 1c"><div class="hljs-line"><span class="hljs-string">|- node_modules  包含安装的模块</span>
</div><div class="hljs-line"><span class="hljs-string">|- public  页面模板和IconLogo</span>
</div><div class="hljs-line">    <span class="hljs-string">|- favicon.ico</span>
</div><div class="hljs-line">    <span class="hljs-string">|- index.html</span>
</div><div class="hljs-line"><span class="hljs-string">|- src  我们编写的程序</span>
</div><div class="hljs-line">    <span class="hljs-string">|- index.jsx  程序入口「jsx后缀名可以让文件支持jsx语法」</span>
</div><div class="hljs-line"><span class="hljs-string">|- package.json</span>
</div><div class="hljs-line"><span class="hljs-string">|- ...</span>
</div></code></pre>

    <p>package.json</p>
    <pre class="prettyprint hljs-dark"><code class="language-json hljs"><div class="hljs-line">{
</div><div class="hljs-line">  ...
</div><div class="hljs-line">  <span class="hljs-attr">"dependencies"</span>: {
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    <span class="hljs-attr">"react"</span>: <span class="hljs-string">"^18.2.0"</span>,  //核心
</div><div class="hljs-line">    <span class="hljs-attr">"react-dom"</span>: <span class="hljs-string">"^18.2.0"</span>,  //视图编译
</div><div class="hljs-line">    <span class="hljs-attr">"react-scripts"</span>: <span class="hljs-string">"5.0.1"</span>, //对打包命令的集成
</div><div class="hljs-line">    <span class="hljs-attr">"web-vitals"</span>: <span class="hljs-string">"^2.1.4"</span>  //性能检测工具
</div><div class="hljs-line">  },
</div><div class="hljs-line">  <span class="hljs-attr">"scripts"</span>: {
</div><div class="hljs-line">    <span class="hljs-attr">"start"</span>: <span class="hljs-string">"react-scripts start"</span>, //开发环境启动web服务进行预览
</div><div class="hljs-line">    <span class="hljs-attr">"build"</span>: <span class="hljs-string">"react-scripts build"</span>, //生产环境打包部署
</div><div class="hljs-line">    <span class="hljs-attr">"test"</span>: <span class="hljs-string">"react-scripts test"</span>,   //单元测试
</div><div class="hljs-line">    <span class="hljs-attr">"eject"</span>: <span class="hljs-string">"react-scripts eject"</span>  //暴露配置项
</div><div class="hljs-line">  },
</div><div class="hljs-line">  <span class="hljs-attr">"eslintConfig"</span>: {  //ESLint词法检测
</div><div class="hljs-line">    <span class="hljs-attr">"extends"</span>: [
</div><div class="hljs-line">      <span class="hljs-string">"react-app"</span>,
</div><div class="hljs-line">      <span class="hljs-string">"react-app/jest"</span>
</div><div class="hljs-line">    ]
</div><div class="hljs-line">  },
</div><div class="hljs-line">  <span class="hljs-attr">"browserslist"</span>: {  //浏览器兼容列表
</div><div class="hljs-line">    <span class="hljs-attr">"production"</span>: [
</div><div class="hljs-line">      <span class="hljs-string">"&gt;0.2%"</span>,
</div><div class="hljs-line">      <span class="hljs-string">"not dead"</span>,
</div><div class="hljs-line">      <span class="hljs-string">"not op_mini all"</span>
</div><div class="hljs-line">    ],
</div><div class="hljs-line">    <span class="hljs-attr">"development"</span>: [
</div><div class="hljs-line">      <span class="hljs-string">"last 1 chrome version"</span>,
</div><div class="hljs-line">      <span class="hljs-string">"last 1 firefox version"</span>,
</div><div class="hljs-line">      <span class="hljs-string">"last 1 safari version"</span>
</div><div class="hljs-line">    ]
</div><div class="hljs-line">  }
</div><div class="hljs-line">}
</div></code></pre>

    <p>默认情况下，会把webpack配置项隐藏到node_modules中，如果想修改，则需要暴露配置项： <br>
      <code>$ yarn eject</code>
    </p>
    <pre class="prettyprint hljs-dark"><code class="hljs 1c"><div class="hljs-line">/* package.json中的变化 */
</div><div class="hljs-line">{
</div><div class="hljs-line">  <span class="hljs-string">"dependencies"</span>:{  <span class="hljs-comment">//暴露后，webpack中需要的模块都会列在这</span>
</div><div class="hljs-line">     ...
</div><div class="hljs-line">  },
</div><div class="hljs-line">  <span class="hljs-string">"scripts"</span>: {
</div><div class="hljs-line">    <span class="hljs-string">"start"</span>: <span class="hljs-string">"node scripts/start.js"</span>,
</div><div class="hljs-line">    <span class="hljs-string">"build"</span>: <span class="hljs-string">"node scripts/build.js"</span>,
</div><div class="hljs-line">    <span class="hljs-string">"test"</span>: <span class="hljs-string">"node scripts/test.js"</span>
</div><div class="hljs-line">    <span class="hljs-comment">//不在基于react-scripts处理命令，而是直接基于node去执行对应的文件</span>
</div><div class="hljs-line">    <span class="hljs-comment">//已经没有eject命令了</span>
</div><div class="hljs-line">  },
</div><div class="hljs-line">  <span class="hljs-string">"jest"</span>: {
</div><div class="hljs-line">    <span class="hljs-comment">//单元测试配置</span>
</div><div class="hljs-line">  },
</div><div class="hljs-line">  <span class="hljs-string">"babel"</span>: {  <span class="hljs-comment">//关于babel-loader的额外配置</span>
</div><div class="hljs-line">    <span class="hljs-string">"presets"</span>: [
</div><div class="hljs-line">      <span class="hljs-string">"react-app"</span>
</div><div class="hljs-line">    ]
</div><div class="hljs-line">  }
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">/* 新增的内容 */
</div><div class="hljs-line"><span class="hljs-string">|- scripts</span>
</div><div class="hljs-line">    <span class="hljs-string">|- start.js</span>
</div><div class="hljs-line">    <span class="hljs-string">|- build.js</span>
</div><div class="hljs-line">    <span class="hljs-string">|- ...</span>
</div><div class="hljs-line"><span class="hljs-string">|- config</span>
</div><div class="hljs-line">    <span class="hljs-string">|- webpack.config.js</span>
</div><div class="hljs-line">    <span class="hljs-string">|- paths.js</span>
</div><div class="hljs-line">    <span class="hljs-string">|- ...</span>
</div></code></pre>

    <p><strong>真实项目中常用的一些修改操作</strong> <br>
      <code>配置less</code>
    </p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/* </span>
</div><div class="hljs-line"><span class="hljs-comment">默认安装和配置的是sass，如果需要使用less，则需要：</span>
</div><div class="hljs-line"><span class="hljs-comment">1. 安装</span>
</div><div class="hljs-line"><span class="hljs-comment">  $ yarn add less less-loader@8</span>
</div><div class="hljs-line"><span class="hljs-comment">  $ yarn remove sass-loader</span>
</div><div class="hljs-line"><span class="hljs-comment">2. 修改webpack.config.js</span>
</div><div class="hljs-line"><span class="hljs-comment">*/</span>
</div><div class="hljs-line"><span class="hljs-comment">// 72~73</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> lessRegex = <span class="hljs-regexp">/\.less$/</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> lessModuleRegex = <span class="hljs-regexp">/\.module\.less$/</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">//507~545</span>
</div><div class="hljs-line">{
</div><div class="hljs-line">  <span class="hljs-attr">test</span>: lessRegex,
</div><div class="hljs-line">  <span class="hljs-attr">exclude</span>: lessModuleRegex,
</div><div class="hljs-line">  <span class="hljs-attr">use</span>: getStyleLoaders(
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    <span class="hljs-string">'less-loader'</span>
</div><div class="hljs-line">  )
</div><div class="hljs-line">},
</div><div class="hljs-line">{
</div><div class="hljs-line">  <span class="hljs-attr">test</span>: lessModuleRegex,
</div><div class="hljs-line">  <span class="hljs-attr">use</span>: getStyleLoaders(
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    <span class="hljs-string">'less-loader'</span>
</div><div class="hljs-line">  ),
</div><div class="hljs-line">}
</div></code></pre>

    <p><code>配置别名</code></p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">//313</span>
</div><div class="hljs-line">resolve: {
</div><div class="hljs-line">  ...
</div><div class="hljs-line">  alias: {
</div><div class="hljs-line">    <span class="hljs-string">'@'</span>: path.appSrc,
</div><div class="hljs-line">    ...
</div><div class="hljs-line">  }
</div><div class="hljs-line">}
</div></code></pre>

    <p><code>配置预览域名</code></p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// scripts/start.js</span>
</div><div class="hljs-line"><span class="hljs-comment">// 48</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> HOST = process.env.HOST || <span class="hljs-string">'127.0.0.1'</span>;
</div><div class="hljs-line"><span class="hljs-comment">// 也可以基于 cross-env 设置环境变量</span>
</div></code></pre>

    <p><code>配置跨域代理</code></p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment">安装 http-proxy-middleware</span>
</div><div class="hljs-line"><span class="hljs-comment">$ yarn add http-proxy-middleware</span>
</div><div class="hljs-line"><span class="hljs-comment"></span>
</div><div class="hljs-line"><span class="hljs-comment">src/setupProxy.js</span>
</div><div class="hljs-line"><span class="hljs-comment">*/</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> { createProxyMiddleware } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'http-proxy-middleware'</span>);
</div><div class="hljs-line"><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">app</span>) </span>{
</div><div class="hljs-line">    app.use(
</div><div class="hljs-line">        createProxyMiddleware(<span class="hljs-string">"/api"</span>, {
</div><div class="hljs-line">            <span class="hljs-attr">target</span>: <span class="hljs-string">"http://127.0.0.1:7100"</span>,
</div><div class="hljs-line">            <span class="hljs-attr">changeOrigin</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">            <span class="hljs-attr">ws</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">            <span class="hljs-attr">pathRewrite</span>: { <span class="hljs-string">"^/api"</span>: <span class="hljs-string">""</span> }
</div><div class="hljs-line">        })
</div><div class="hljs-line">    );
</div><div class="hljs-line">};
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">//测试地址：</span>
</div><div class="hljs-line"><span class="hljs-comment">//https://www.jianshu.com/asimov/subscriptions/recommended_collections</span>
</div><div class="hljs-line"><span class="hljs-comment">//https://news-at.zhihu.com/api/4/news/latest</span>
</div></code></pre>

    <p><code>配置浏览器兼容</code></p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">//package.json</span>
</div><div class="hljs-line"><span class="hljs-comment">//https://github.com/browserslist/browserslist</span>
</div><div class="hljs-line"><span class="hljs-string">"browserslist"</span>: {
</div><div class="hljs-line">  <span class="hljs-string">"production"</span>: [
</div><div class="hljs-line">    <span class="hljs-string">"&gt;0.2%"</span>,
</div><div class="hljs-line">    <span class="hljs-string">"not dead"</span>,
</div><div class="hljs-line">    <span class="hljs-string">"not op_mini all"</span>
</div><div class="hljs-line">  ],
</div><div class="hljs-line">  <span class="hljs-string">"development"</span>: [
</div><div class="hljs-line">    <span class="hljs-string">"last 1 chrome version"</span>,
</div><div class="hljs-line">    <span class="hljs-string">"last 1 firefox version"</span>,
</div><div class="hljs-line">    <span class="hljs-string">"last 1 safari version"</span>
</div><div class="hljs-line">  ]
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*</span>
</div><div class="hljs-line"><span class="hljs-comment">CSS兼容处理：设置前缀</span>
</div><div class="hljs-line"><span class="hljs-comment">autoprefixer + postcss-loader + browserslist</span>
</div><div class="hljs-line"><span class="hljs-comment"></span>
</div><div class="hljs-line"><span class="hljs-comment">JS兼容处理：ES6语法转换为ES5语法</span>
</div><div class="hljs-line"><span class="hljs-comment">babel-loader + babel-preset-react-app(@babel/preset-env) + browserslist</span>
</div><div class="hljs-line"><span class="hljs-comment"></span>
</div><div class="hljs-line"><span class="hljs-comment">JS兼容处理：内置API</span>
</div><div class="hljs-line"><span class="hljs-comment">入口配置react-app-polyfill</span>
</div><div class="hljs-line"><span class="hljs-comment">*/</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> <span class="hljs-string">'react-app-polyfill/ie9'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> <span class="hljs-string">'react-app-polyfill/ie11'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> <span class="hljs-string">'react-app-polyfill/stable'</span>;
</div></code></pre>

    <p>其余的一些优化配置、响应式布局的配置等，实战中再去处理！！</p>
  </div>
</body>

</html>