react理解

2022-06-22 本文已影响0人小陈wx

1.何为react

什么是react？

react是一个用于构建用户界面的JS库；
react能干什么？

通过组件化的方式，构建快速响应的大型web应用程序；
react是怎么样做的？

1.声明式，声明式方式书写界面（jsx），更加直观方便；
与声明式对应的还有命令式，即每行命令指示程序如何进行下一步详细操作，相比而言代码复杂工作量大，优点过程可见，易于修改。声明式就是对命令式的封装

//声明式
  reactDom.render(<h1 onClick={()=>{console.log("1")}}>hello !!!</h1>,document.getElementById(`root`));
//命令式
  let root =  document .getElementById(`root`);
  let h1 = document.createElement(`h1`);
  h1.innerHTML = "hello !!!";
  h1.addEventListener('click',()=>{console.log("1")});
  root.appendChild(h1);

2.组件化，将界面分割为各个组件，便于复用。高内聚低耦合，高内聚即为组件内部包含完整dom结构、样式、逻辑。低耦合组件间相互依赖少易拆分，易组合。

2.为何要使用JSX？

什么是jsx？

jsx全称javascript xml，意为js中的可扩展标记语言（EXtensible Markup Language），这意味着开发者遵循jsx的语法可以直接在js代码中书写同html高度相似的界面结构，声明式的构建页面，代码直观清晰，可读性高，jsx无法被浏览器识别，所以编写的jsx代码最终会被bebal编译为用React.createElement方式实现的代码，这样看来jsx其实是React.createElement的语法糖。

jsx与babel

下方这个网站可以在线体验babel编译功能，babel是个针对js的编译工具，他可以将以ES6（ES2015+）规范编写的代码，转换为向后兼容的代码，以便在老旧浏览器或其他环境中正常运行，同时babel还拥有许多其他插件来转换不同的东西，例如可以将jsx代码，转换为普通的react代码命令。通常情况下babel会被集成到webpack之中在打包时对代码进行编译；
https://www.babeljs.cn/repl
babel利用AST抽象语法树来进行编译工作，AST 全称为 AbstractSyntax Tree，译为抽象语法树。在 JavaScript 中，任何一个对象（变量、函数、表达式等）都可以转化为一个抽象语法树的形式。抽象语法树本质就是一个树形结构的对象。如何得到AST，首先分词，然后利用分词结果，分析并关联各个词条，整合成一个树状结构的表达形式，整合后的对象就是AST,简单来说AST就是以对象的形式来呈现的代码段。

const a = 5;
//词法分析
[{value:'const',type:'keyword'},{value:'a',type:'identifier'}...]

babel工作逻辑：源代码>>>利用源代码语法规则分词分析并关联>>>得到源代码AST>>>>利用目标源代码AST规则对应转换>>>得到目标源代码AST >>> 根据目标源码语法还原>>>目标源代码；

最终babel通过上诉过程将JSX代码转化为浏览器可执行的 react.createElement等方法，babel存在的意义是让开发者能用上新规范中的API和新颖方便的编写方式，通过Babel编译后又能让这些代码兼容老旧特殊的运行环境。

3. 虚拟DOM（virtualDOM）？

什么是虚拟DOM？

虚拟DOM只是一个普通对象，该对象记录一些值来描述真实DOM的节点是什么样子。在react中创建一个虚拟dom，可以直接使用react.createElement (type,config,chlidren)方法创建,返回一个包含type 、key、props、_source等属性的对象：

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react学习</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <div id="root"></div>
<script>


const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

console.log(LikeButton,e,e(LikeButton))

let domContainer = document.querySelector('#root');
ReactDOM.render(e(LikeButton), domContainer);

</script>

</body>
</html>

虚拟DOM优点：

1、差异化更新（diff算法），精准更新，减少DOM操作；
2、处理浏览器兼容问题，如不同平台的点击事件绑定（事件代理，和书写差异）；
3、内容经过防范XSS攻击过滤（在渲染所有输入内容之前，默认会进行转义）；
4、虚拟DOM编译为真实DOM由react实现，可以由react帮你实现跨平台编译，Android、iOS；

虚拟DOM缺点：

1、虚拟DOM即是真实DOM的对象形式呈现，必然占用额外内存；
2、首次渲染比直接渲染HTML文件里的节点要慢，需要等待定义虚拟DOM的JS文件加载并运行完毕，才能渲染；

函数组件（无状态组件）与类组件

组件：将UI界面划分为多块独立可复用的模块，代表这些模块的代码片段即为组件；
相同点：
都返回一个react元素（虚拟DOM对象）
不同点：
1.类组件是面向对象思想，需要实例化类组件有额外的内存占用，函数组件是函数式编程思想;
2.类组件中每次渲染的props与state是最新的，而函数组件每次渲染时，函数方法被重新调用，传入的props如果以闭包的形式被使用，到使用这个属性时，他将呈现被传入的状态，而不是最新的状态，这也是被称之为无状态组件的原因，在reack 16.8 以后的版本推出了hook的概念，再此以后函数组件就不能够被叫做无状态组件了；
其他：
PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component一致，这个比较是react实现的并自动执行，实际过程中深层次数据不同不能引起组件更新

React Hooks

React Hooks 是从 React 16.8 版本推出的新特性，目的是解决 React 的状态共享以及组件生命周期管理混乱的问题。
Hook让开发者在函数组件中可以利用其API“钩入”React state状态以及相应的生命周期，这样解决了过去无状态和生命周期的弊端，React Hooks 的出现标志着，函数组件不可以再被称为无状态组件，React 将只有类组件和函数组件的概念，都可以保持状态并拥有生命周期。

hooks 为函数组件提供了状态，也支持在函数组件中进行数据获取、订阅事件解绑事件等等。hook相关的方法需要在组件方法内部调用，常见的hook API有：useState（添加状态） useEffect(副作用，模拟生命周期mount和update) useContext（直接获取祖先元素通过createContext创建的context） useReducer（useState单向数据流的简易实现，组件内的单向数据流） useCallback useMemo（pureComponent的函数组件实现）

useState(初始值),返回一个数组[get值,set值]

let [name,set]  = React.useState("初始值");

useEffect(回调函数,[监听值变化1,监听值变化2,...]),模拟生命周期，第2个值为空则只执行一次，否则根据参数2中的变化执行,useLayoutEffect这个函数与useEffect相同，只是执行时机不同，useEffect是异步任务，等待浏览器渲染完成执行，useLayoutEffect是同步任务阻塞界面渲染，等同于componentDidMount，在虚拟DOM构建完毕，浏览器真正渲染前执行

React.useEffect(()=>{
      setTimeout(()=>{
        console.log(1)
      },3000)

      effect

      return()=>{
        cleanup
      }

    },[import1,import2])

useContext(context变量)

//注意改函数需要Provider 外层包裹，否则无法获取CountContext
const count = useContext(CountContext);

useReducer(reducer函数,initalState初始值)

//注意改函数需要Provider 外层包裹，否则无法获取CountContext
const count = useContext(CountContext);

useMemo和memo
React.memo()可接受2个参数，第一个参数为纯函数的组件，第二个参数用于对比props控制是否刷新，与shouldComponentUpdate()功能类似。
useMemo是memo的hook实现，useMemo接受2个参数第一个为factory函数，该函数返回值即为useMemo返回值，第二个参数为依赖项，只有依赖项发生变化，才执行useMemo中参数一的方法拿到最新的值并渲染；这里值得注意的是useCallback同useMemo功能一样，只是返回值不同，useMemo返回值为参数一的返回值，useCallback返回参数一本身！！！

const otherName =  useMemo(()=>changeName(name),[name])
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>
 
  )
}

useRef方法，在函数组件内定义一个存储空间，功能类似this，包含一个current属性，每次该函数组件重新渲染时useRef创建的对象都是同一个内存地址的应用，而createRef在此点则不同，它每次都是新建一个内存空间（新建对象）。

function App() {
  const [num, setNum] = React.useState(0)
  const uRef = React.useRef()
  const cRef = React.createRef()
  const btnClk = () => {
    setNum((num) => num + 1)
  }
  React.useEffect(() => {
    uRef.current = num
    cRef.current = num
    console.log(num,'in effect')
  }, [num])
  console.log(uRef.current, cRef.current, 'state的改变引起的组件重渲染')
  return (
    <div className="App">
      <input ref={uRef}/>
      <input ref={cRef}/>
      <button onClick={btnClk}>button</button>
    </div>
  );
}

useCallback缓存方法，避免不必要的reRender或计算，接受两个参数一个是回调方法，一个依赖项，同样依赖项变化会导致useCallback重新执行返回新的方法，下面是结合useRef使用的经典案例

function Form() {
  const [text, updateText] = useState('');
  const textRef = useRef();

  useLayoutEffect(() => {
    textRef.current = text; // 将 text 写入到 ref
  });

  const handleSubmit = useCallback(() => {
    const currentText = textRef.current; // 从 ref 中读取 text
    alert(currentText);
  }, [textRef]); // handleSubmit 只会依赖 textRef 的变化。不会在 text 改变时更新

  return (
    <>
      <input value={text} onChange={e => updateText(e.target.value)} />
      <ExpensiveTree onSubmit={handleSubmit} />
    </>
  );
}

React 生命周期 16.3+

多版本生命周期大同小异，主要3个阶段挂载阶段（实例化阶段）更新阶段（续存阶段）销毁阶段
挂载阶段钩子执行顺序：构造函数-constructor 传入属性修改状态-getDerivedStateFromProps 生成虚拟DOM-render 组件挂载完毕-componentDidMount
更新阶段钩子执行顺序：传入属性修改状态-getDerivedStateFromProps 确认是否更新-shouldComponentUpdate 生成虚拟DOM-render 获取更新前快照-getSnapshotBeforeUpdate 组件更新完毕-componentDidUpdate
销毁阶段：组件销毁前-componentWillUnmount

react理解

1.何为react

什么是react？

react能干什么？

react是怎么样做的？

2.为何要使用JSX？

什么是jsx？

jsx与babel

3. 虚拟DOM（virtualDOM）？

什么是虚拟DOM？

虚拟DOM优点：

虚拟DOM缺点：

函数组件（无状态组件）与类组件

React Hooks

React 生命周期 16.3+

猜你喜欢

热点阅读

react理解

1.何为react

什么是react？

react能干什么？

react是怎么样做的？

2.为何要使用JSX？

什么是jsx？

jsx与babel

3. 虚拟DOM（virtualDOM）？

什么是虚拟DOM？

虚拟DOM优点 ：

虚拟DOM缺点 ：

函数组件（无状态组件）与类组件

React Hooks

React 生命周期 16.3+

猜你喜欢

热点阅读

虚拟DOM优点：

虚拟DOM缺点：