React 基础知识第 2 部分-js教程-PHP中文网

React 基础知识第 2 部分

DDD

发布： 2024-09-19 08:15:05

转载

567人浏览过

react 基础知识第 2 部分

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

12。上下文 api

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

示例：

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

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

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

登录后复制

13。参考文献

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

示例：

import { useref } from 'react';

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

  const onbuttonclick = () => {
    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 {...props} />;
  };
}

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' })}>-</button>
      <span>{state.count}</span>
      <button onclick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

登录后复制

17。反应片段

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

示例：

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

登录后复制

18。传送门

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

示例：

import reactdom from 'react-dom';

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

登录后复制

19。误差边界

红色宽屏机械设备叉车产品网站

红色宽屏机械设备叉车产品网站织梦dedecms模板，非常大气的一套织梦模板，这套模板是各位做红色宽屏机械设备叉车产品网站织梦dedecms模板网站的首选，此模板含有数据的整站模板，但是还是需要修改部分图片文字和模板调用id，修改需要一定html基础和dede织梦基础标签知识。

查看详情

错误边界是 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(() => import('./othercomponent'));

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

登录后复制

21。严格模式

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

示例：

function app() {
  return (
    <react.strictmode>
      <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)}
    />
  );
}

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} />;
}

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

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(() => {
    const intervalId = setInterval(() => {
      countRef.current += 1;
      console.log(countRef.current);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

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

登录后复制

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

以上就是React 基础知识第 2 部分的详细内容，更多请关注php中文网其它相关文章！