React 基础知识第 2 部分- 技术经验 -卓越飞翔博客

react 基础知识第 2 部分

以下是一些更高级的 react 概念和术语：

12。上下文 api

context api 提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。它对于主题、身份验证或用户数据等全局数据很有用。

示例：

const themecontext = react.createcontext('light');

function themedbutton() {
  return (
    <themecontext.consumer>
      {theme =&gt; <button classname="{theme}">i am styled by {theme} theme!</button>}
    </themecontext.consumer>
  );
}

function app() {
  return (
    <themecontext.provider value="dark"><themedbutton></themedbutton></themecontext.provider>
  );
}

13。参考文献

refs 提供了一种访问 dom 节点或在 render 方法中创建的 react 元素的方法。它通常用于直接修改 dom 元素或管理焦点。

示例：

import { useref } from 'react';

function textinputwithfocusbutton() {
  const inputel = useref(null);

  const onbuttonclick = () =&gt; {
    inputel.current.focus();
  };

  return (
    <div>
      <input ref="{inputel}" type="text"><button onclick="{onbuttonclick}">focus the input</button>
    </div>
  );
}

14。高阶组件 (hoc)

hoc 是一个接受组件并返回新组件的函数。它经常用于重用组件逻辑。

示例：

function withlogger(wrappedcomponent) {
  return function withlogger(props) {
    console.log('rendering component');
    return <wrappedcomponent></wrappedcomponent>;
  };
}

const enhancedcomponent = withlogger(mycomponent);

15。 react.memo

react.memo 是一个高阶组件，它通过记忆组件来帮助优化性能。如果 props 没有改变，组件将跳过重新渲染。

示例：

const mycomponent = react.memo(function mycomponent(props) {
  return <div>{props.text}</div>;
});

16。使用reducer hook

usereducer 钩子是 usestate 的替代方案。它对于管理更复杂的状态逻辑非常有用，特别是当状态依赖于先前的值时。

示例：

import { usereducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new error();
  }
}

function counter() {
  const [state, dispatch] = usereducer(reducer, { count: 0 });

  return (
    <div>
      <button onclick="{()"> dispatch({ type: 'decrement' })}&gt;-</button>
      <span>{state.count}</span>
      <button onclick="{()"> dispatch({ type: 'increment' })}&gt;+</button>
    </div>
  );
}

17。反应片段

react fragments 让您可以对子级列表进行分组，而无需向 dom 添加额外的节点。

示例：

function table() {
  return (
    
      <tr>
<td>row 1</td>
      </tr><tr>
<td>row 2</td>
      </tr>&gt;
  );
}

18。传送门

门户提供了一种将子组件渲染到父组件层次结构之外的 dom 节点的方法。

示例：

import reactdom from 'react-dom';

function modal({ children }) {
  return reactdom.createportal(
    <div classname="modal">{children}</div>,
    document.getelementbyid('modal-root')
  );
}

19。误差边界

错误边界是 react 组件，可以在其子组件树中的任何位置捕获 javascript 错误，记录这些错误并显示后备 ui。

示例：

class errorboundary extends react.component {
  constructor(props) {
    super(props);
    this.state = { haserror: false };
  }

  static getderivedstatefromerror(error) {
    return { haserror: true };
  }

  render() {
    if (this.state.haserror) {
      return <h1>something went wrong.</h1>;
    }

    return this.props.children;
  }
}

20。延迟加载

react 支持组件延迟加载，这意味着组件可以在需要时异步加载，从而提高大型应用程序的性能。

示例：

import react, { suspense } from 'react';

const othercomponent = react.lazy(() =&gt; import('./othercomponent'));

function mycomponent() {
  return (
    <suspense fallback="{&lt;div">loading...}&gt;
      <othercomponent></othercomponent></suspense>
  );
}

21。严格模式

strictmode 是一个用于突出显示应用程序中潜在问题的工具。它不会呈现任何可见的 ui，但会检查是否存在已弃用的生命周期方法等问题。

示例：

function app() {
  return (
    <react.strictmode><mycomponent></mycomponent></react.strictmode>
  );
}

22。受控组件与非受控组件

受控组件：表单元素，其值由 react 状态控制。

不受控制的组件：由 dom 处理值的表单元素。

example of controlled component:

function controlledinput() {
  const [value, setvalue] = usestate('');

  return (
    <input type="text" value="{value}" onchange="{(e)"> setvalue(e.target.value)}
    /&gt;
  );
}

example of uncontrolled component:

function uncontrolledinput() {
  const inputref = useref(null);

  return <input type="text" ref="{inputref}">;
}

23。支柱钻井

当数据通过多个级别的组件向下传递以到达深层嵌套的子组件时，就会发生 prop drilling。通过使用 context api 或状态管理库可以避免这种情况。

example of prop drilling:

function grandparent() {
  const name = "john";
  return <parent name="{name}"></parent>;
}

function parent({ name }) {
  return <child name="{name}"></child>;
}

function child({ name }) {
  return <p>{name}</p>;
}

24。渲染生命周期

react 组件有一个生命周期，其中包含在不同阶段调用的方法，例如安装、更新和卸载。

生命周期方法（类组件）：

- componentdidmount
- componentdidupdate
- componentwillunmount

示例：

class mycomponent extends react.component {
  componentdidmount() {
    console.log('component mounted');
  }

  componentdidupdate() {
    console.log('component updated');
  }

  componentwillunmount() {
    console.log('component will unmount');
  }

  render() {
    return <div>hello!</div>;
  }
}

25。 useref hook

useref 钩子用于在渲染之间保留值，而不会导致重新渲染。它通常用于访问 dom 元素或存储可变值。

示例：

function Timer() {
  const countRef = useRef(0);

  useEffect(() =&gt; {
    const intervalId = setInterval(() =&gt; {
      countRef.current += 1;
      console.log(countRef.current);
    }, 1000);

    return () =&gt; clearInterval(intervalId);
  }, []);

  return <p>Check the console to see the timer.</p>;
}

这些附加概念将帮助您加深对 react 的理解并应对更高级的场景！

相关推荐