2 strange ways to write React

Although Reactthe official website uses a lot of space to introduce best practices, due to JSXthe flexibility of the grammar, strange Reactwriting methods always appear.

This article introduces two strange (but meaningful in some scenarios) Reactwriting methods. You are also welcome to discuss the strange writing methods you have encountered in the comment area.

Welcome to join the human high-quality front-end exchange group and lead flying

Weird usage of ref

This is a piece of code that is confusing at first glance:

function  App () {
   const [dom, setDOM] = useState ( null );
 
  return  < div  ref = {setDOM} > </ div > ;
}

Let’s analyze its function.

First, refthere are two forms (there used to be 3):

  1. {current: T}data structure
  2. Callback function form, which will refbe triggered when updating or destroying

The setDOMmethod in the example also has two calling forms:useStatedispatch

  1. Pass the updated value directly, such assetDOM(xxx)
  2. Pass a method to update the status, such assetDOM(oldDOM => return /* 一些处理逻辑 */)

In the example, although anomalous, refthe second form of and dispatchthe second form of do indeed fit.

In other words, the method passed in the example will refbe executed when the DOM corresponding to the div is updated and destroyed, so what is saved in the state is the latest value of the DOM corresponding to the div .setDOMdom

This enables the perception of real-time changes in the DOMref to a certain extent, which is an ability that cannot be achieved simply by using it .

Weird usage of useMemo

Usually we think of useMemoit as caching variables propsand useCallbackfunctions props.

But in actual projects, if you want to optimize the performance of subcomponents by caching props , you need to ensure at the same time:

  • All references passed to child components propsare unchanged (such as through useMemo)
  • Subcomponent usageReact.memo

Something like this:

function  App ( {todos, tab} ) {
     const visibleTodos = useMemo (
       () =>  filterTodos (todos, tab),
    [todos, tab]);
    
    return  < Todo  data = {visibleTodos}/ > ;
}

// In order to achieve the purpose of Todo performance optimization 
const  Todo = React . memo ( ( {data} ) => {
   // ...omit logic 
})

Since useMemovariables can be cached, why not directly cache the return value of the component? Something like this:

function  App ( {todos, tab} ) {
   const visibleTodos = useMemo (
       () =>  filterTodos (todos, tab),
  [todos, tab]);
  
  return  useMemo ( () =>  < Todo  data = {visibleTodos}/ > , [visibleTodos])
}

function  Todo ( {data} ) {
   return  < p > {data} </ p > ;
}

In this way, subcomponents that require performance optimization no longer need to be wrapped manually React.memo, and useMemothe subcomponents will only be repackaged when dependencies change render.

Summarize

In addition to these two strange ways of writing, what other strange Reactways of writing have you encountered?

By React Native