numerDotConversion.py

import re
import convert
from node import Node

def convertToString():
    str = """1. 为什么要用React?

    这个问题直接回答不好回答，我们不妨换个问题，用React 有什么优势？—— 

    快，好。首先Html 语言天生就没有复用的能力，它只是标记网页上的元素，所以如果有相同的元素，也只能copy, paste 地复用，这样即无效率，也不优雅。

    于是用起了js, js 倒是能通过函数实现复用，但是其操作dom 元素需要定位，然后对找到的元素进行操作。原生dom 其实写起来很麻烦，把这一部分js 进行封装，就是当时的jquery。而jquery 有什么问题呢？jquery 自身没有问题，只是没有jsx 好用。js 直接操作dom 对象其实是最快的，但是通过函数的设置，总归不是html 本身的结构，用起来不直观，也不方便。React 的出现，使得我们能在js 代码中直接定义树形结构，将jquery 中对element 的操作再往上封装了一层，从React 开始，开发者只需要关注页面应该是怎么样子，而不是怎么使页面变成这个样子，简化了开发的工作——至于是否变得更简单了，我认为其实没有，关键在于你需要理解的东西变更多了。

    所以React 的优势，在于简化了开发，加快了开发流程，也使得开发出来的代码更好看，好维护了。

    
2. 为什么要使用jsx？

    先说什么是jsx，jsx 是一种可以在js 代码中写类似xml 标记语言的语言，其原理是将jsx 代码通过某种工具转换成js 代码。

    通过jsx 直接定义结构使得前端页面的结构可以直观地展示和复用。

    
3. 什么是组件以及为什么要使用组件？

    使用组件(Component) 就是为了更好地复用逻辑。组件其实就是一个js 中的类，当然js 中的类其实就是一个函数。通过组件实现一些模板代码，可以实现生命周期，以及定义组件的一些行为。组件的主要功能如下：

    - 生命周期
    - 通过Extentds 进行复用
    - 定义state, 和触发state 变化时的重新渲染。

    
4. 什么是React 的数据流？

    数据流是指父子组件之间的数据传递。每一个组件定义时应该只拥有属于它自己的变量，这样更加容易管理。而子组件又有的时候会影响到其他的组件状态，所以需要对这些数据以及数据变化进行管理，这就是数据流。

    
5. 为什么React 要有props 和state?

    props 是父组件传递给子组件的属性，可以给子组件使用。既包含数据，也可能包含对父组件进行变更的函数。

    state 是子组件本身拥有的状态，其中定义的是子组件真正的属性，props 和state 的状态和结构可以是不同的。

    参照java 的概念，props 可以类比为对象的初始化参数，state 则是类的私有变量。

    不妨回答一个这样的问题：如果只留下props, 将setState 变为setProps 来进行状态管理会怎么样？

    那么子组件可以通过修改props 里的对象从而获得直接修改父组件状态的能力，这使得状态的管理会变得很复杂，这样的话出现问题就难以追溯——特别是在大型项目里。（**这样的道理我是能接受的，但是确实很难直观地理解）**——想到一个例子，比如说一个父组件有100个组件，需要引用到父组件里的一个状态，于是传下去了，如果只有props，那子组件就都能对其进行修改。而通过同时用props 和state, 就实现了只允许部分组件进行修改的功能，而默认是不允许修改的——而且这样的修改本身是通过直接修改对象本身的，就更加难以追溯。

    
6. 为什么要用context?

    因为子组件如果需要用到父组件的数据，只能通过props 传的话，当子组件与父组件之间存在许多层级时，需要一层层传递，不太方便。通过context 能够简化传递。

    
7. 为什么要用redux?

    这个写清楚了，如果只需要做状态的父子组件的复用，那context 就够了；但是context 的问题是，（1）所有定阅了context 的组件在context 的state 发生改变时都会被迫更新—— 性能的问题；（2）因为context 并不会记录所有状态的变化，所以对于状态的追溯会无能为力
   
    > 还是那句老话，脱离具体的业务场景去讨论不同技术的好坏都是耍流氓。那些相似的技术就像世间上的各种“刀”，一旦发明出来，则意味着必定有它的最佳使用场景。下面我们来总结一下这三种技术的各自适用场景分别是什么。

    > Context API
      - 只考虑偏静态数据的跨组件层级传递和共享，不考虑状态更新

    > Context API + useReducer
      - 小中型的状态管理场景，意味着状态规模不大，更新状态的逻辑代码不复杂
      - 对代码的可调试性没有很高的要求
      - 对渲染性能没有很高的要求

    > redux + react-redux
      - 中大型的状态管理场景，意味着状态规模很大，更新状态的逻辑代码比较复杂，存在多人协作
      - 代码的可调式性有比较高的要求。需要快速地知道四个“什么”问题（状态在“什么时候”，“在什么地方”，“为什么”，“发生了什么样的”变化）的答案。
      - 需要用到副作用机制增加代码的可读性
      - 需要用到中间件来增加应用的可扩展性
      - 需要对用户操作轨迹进行日志记录
      - 考虑使用一个redux store 对接到不同的 UI 层（比如同时对接到react和vue）
      - 在渲染性能上有更高的追求

    > 作者：鲨叔  

    > 链接：[https://juejin.cn/post/6973977847547297800](https://juejin.cn/post/6973977847547297800)  

    > 来源：稀土掘金  

    > 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

    

7. 为什么要用webpack?

  作为后端项目其实是不用webpack 的。因为nodejs 可以自己找对应的代码自己运行，就是commonJS。

  但是因为浏览器是无法识别模块化所定义的js 的，也无法直接运行，必须转化成浏览器所能理解的结构，webpack 的主要功能就是转化。

  

8. 为什么要用babel?

  浏览器本身只能识别ES5 的js，但是我们现在很多写法都要依赖nodejs 的commonjs 的模块化，或者是ES6 的写法。

  webpack 本身只负责打包，解决依赖。它也不能识别ES6 的写法，babel 就是一项能把别的写法转化为es5 的写法的工具，通过自定义转化器，还能转化其他的写法比如说TypeScript 或JSX

  

9. 什么是虚拟DOM?

  虚拟dom 就是和使用js 对象模拟成的dom 节点，这样的好处在于js 的对象比较，新建操作会少一点，通过虚拟对象来进行计算，并最后将对虚拟dom 的操作转换为对真实dom的操作来提升性能。

  

10. 什么是diff 算法？

  当组件状态发生变化时，如果完全对组件进行渲染，涉及组件的销毁和重新创建，就会带来很大的性能问题。此时最好的办法是找到对应的受影响的部分，把需要变化的地方进行替换（属性，子组件...)

  而状态变化引起了dom 树的怎样的变化就是用的diff 算法。

  diff 算法通过比较虚拟dom 树前后的变化，找到需要修改的操作，并转换为实际DOM 的操作，完成对DOM 的更新。

  传统的Tree diff 算法的算法复杂度是O(n^3), 而React 的tree diff 算法的复杂度是O(n)。因为React 做的其实不是真正的找到真正的最少的操作，而是相对少的操作。这是在diff 算法和操作dom 的性能中找到的一个折衷点。

  diff 算法基于两个假设：

  - 两个不同类型的元素会产生出不同的树
  - 对一层级的一组子元素，它们可以通过唯一ID进行区分

  diff算法优化的三个方法：

  - 只比较同一层级的元素（这是最主要的优化方法，因为直接把O(n^3)变成了O(n)，注意，也还是要比较子元素的，也就是会有递归的比较，不过树的递归本来就是O(n) 的复杂度。
  - 通过shouldComponentUpdate 来进行是否需要比较的提前check, 可以节约一部分比较时间。
  - 通过key 的绑定来识别现有元素，使得进行匹配的时候，可以进行快速定位

  

11. diff 算法前后比较的是什么？

  虚拟dom 的结构。

  

12. diff 算法的两个假设是什么？
  - 两个不同类型的元素会产生不同的树
  - 对同一层级的一组子元素，它们可以通过唯一ID 进行区分

  

13. diff 算法的优化策略是什么？
   - 只比较同一层级的元素（这是最主要的优化方法，因为直接把O(n^3)变成了O(n)，注意，也还是要比较子元素的，也就是会有递归的比较，不过树的递归本来就是O(n) 的复杂度。
   - 通过shouldComponentUpdate 来进行是否需要比较的提前check, 可以节约一部分比较时间。
  - 通过key 的绑定来识别现有元素，使得进行匹配的时候，可以进行快速定位

  

14. 什么是Hook?

  是对组件添加生命周期管理的一个方法，这个对函数式组件会特别有用，因为函数式组件是不能进行生命周期管理的。当然，普通的class 组件也是可以用Hook 的。

  

15. 常用的Hook 及解释？

  useState, 可以模拟state和setState的使用，使得组件能自己管理状态。

  useContext, 可以模拟Context 的功能

  useEffect, 可以模拟update 后的操作

  useReducer, 通过Reducer 来对state 进行管理—— 这个就比较难以解释了，看这段代码可理解：

  import React, { useReducer } from 'react';

    function reducer(state,action){
      switch(action){
        case 'add':
            return state + 1;
        case 'sub':
            return state - 1;
        case 'mul':
            return state * 2;
        default:
            console.log('what?');
            return state;
      }
    }

    function CountComponent() {
      const [count, dispatch] = useReducer(reducer,0);

      return <div>
        {count}
        <button onClick={() => {dispatch('add')}} >add</button>
        <button onClick={() => {dispatch('sub')}} >sub</button>
        <button onClick={() => {dispatch('mul')}} >mul</button>
      </div>;
    }

    export default CountComponent;

16. 跨域这件事是怎么来的？

    首先，HTTP 协议是无状态的，但是对现代网站来说，因为有用户模块，需要对用户进行识别，对同一个请求，不同的用户可能会有不同的返回结果，这就要求对用户的身份进行验证。

    于是乎引入了Cookie, 我们可以把用户的信息甚至是他的权限存在Cookie 里。Cookie 是放在浏览器端，和hostname 进行绑定的。当访问一个同一个hostname 下的链接的时候，一般情况下是会共享Cookie的。

    然而，这样就会引起安全性的问题，因为我们知道在js 中也是可以访问API 的，特别是Ajax 这样的方式。而js 访问API，最终也是由浏览器发起的，如果一个hostname (A)的js 要求访问另一个hostname （B) 的API, 很可能就会造成伪造的身份，得到A 所不该看到的信息。

    为了解决这个问题，就需要对A→B 是否能够访问进行限制，这个是由服务器所定义的，可以在Allow-CORS 进行限制，类似添加一个白名单。而默认是不允许跨域的。

    

17. 有哪三种方法解决跨域的问题？
    - Iframe 的方式（不太清楚，现在应该没怎么用了吧？）
    - CORS 允许策略
    - 代理；使对源目标地址的访问是通过服务器而不是浏览器发起。

    

18. Nginx 是怎么使用的？

    通过定义基于路径或IP 的路由进行服务器的分发，因为可以把路由给分发到不同的端口，可以在同一个机器上启动更多的服务。

    也可以有负载均衡的功能。

    是一个反向代理的工具。

    通过配置定义就好，配置和使用还是挺简单的。

    

19. 用户的鉴权有哪两种方式？
    - 通过Session
    - 通过JWT

    

20. 通过Session 来进行用户鉴权的原理？

    在用户第一次登录后，会生成一个session，在session中会主要是用户记录用户是谁和其权限吧并维持在服务端。然后用session id 来对用户的请求进行追踪。

    Seesion 可以通过url 限制，也可以放在cookie 里

    

21. 通过JWT 来进行用户鉴权的原理？

    在用户第一次登录时，用加密算法将一组json的定义了用户权限的数据进行加密生成一个JWT，将之存入Cookie 中，以后每次访问时都对JWT 进行解密，就能获取用户所拥有的权限信息。

    所以权限数据或用户信息是存放在客户端的

  

22. 什么是客户端加载和服务端加载？

    早期的互联网内容都是服务端加载的，有服务端把html 生成好，然后浏览器根据html 进行界面上元素的绘制。

    但是后来为了优化用户体验，浏览器通过加载一部分html模板，然后在浏览器通过Ajax 请求一些数据，把html 上剩余的部分填充好。这是客户端加载。

    然后现在因为React 的页面元素基本都是由js 进行加载绘制的，客户端加载可能会导致用户体验变差。于是通过服务器把html 渲染好，然后发送给浏览器进行加载

    

23. React 为什么要同构？

    当服务器直接发送html 结构给浏览器时，浏览器进行绘制，如果不做任何操作，那么js 的事件绑定是没有完成的，这就导致用户的点击事件什么的都无法触发——因为没有执行js 嘛。

    为了实现事件绑定，React 实现了在服务端运行一遍js ，然后在客户都运行同样一遍js ，但是客户端运行js 时，不会再重新绘制js ，而是只进行事件绑定了。



    """

    rex_list_str = ["^\d{0,3}\..*"]

    list = str.splitlines()

    rex_list = []
    for x in rex_list_str:
        rex_list.append(re.compile(x))
    node = Node()
    convert.convertStringListToNode(list, rex_list,0,node)
    node.toDataFrams('nodejs+react.csv')

convertToString()