Lightweight react-like library. Like the name, this project is mainly based on the architectural idea of react, which can feel react more intuitively and concisely, and realizes the reconciliation scheduler, also known as time slice.

• 简体中文

The code can be very intuitive to feel a certain design pattern or code idea and architecture. The original intention of this repository is to learn and explore the react more intuitively, so in terms of internal implementation, many parts of the code idea are almost the same as react, but The implementation is simplified, so it is more suitable to understand the operation process of the entire reconciliation scheduler. In terms of external performance, the hooks that have been implemented so far are almost the same as react.

yarn add recept

import { render, useState } from 'recept'

const App = (props) => {
  const [count, setCount] = useState(0)
  return (
    <>
      <h3>count: {count}</h3>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  )
}

render(<App />, document.getElementById('root'))

• useState

• useReducer

• useEffect

• useLayoutEffect

• useCallback

• useMemo

• useRef

useState can add state to a component, it returns an array.

Can be called multiple times within a component, rendered when the component is rendered.

const Counter = (props) => {
  const [count, setCount] = useState(0)
  return (
    <>
      <h3>count: {count}</h3>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  )
}

useReducer and useState are almost the same, but it requires a reducer handler function.

function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return { count: state.count + 1 }
    case 'reduce':
      return { count: state.count - 1 }
  }
}

const App = (props) => {
  const [state, dispatch] = useReducer(reducer, { count: 1 })
  return (
    <div>
      <h2>{state.count}</h2>
      <button onClick={() => dispatch({ type: 'add' })}>+</button>
      <button onClick={() => dispatch({ type: 'reduce' })}>-</button>
    </div>
  )
}

It can execute and clean up side effects, the first parameter is a function, the execution timing is affected by the second parameter, it is asynchronous and does not block the UI.

useEffect(fn)         // every time
useEffect(fn, [])     // only once in a component's life cycle 
useEffect(fn, [dep])  // when property dep changes in a component's life cycle

const App = ({ title }) => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.title = title
  }, [title])

  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  )
}

If the function returns a cleanup function and the dependent function is an empty array, it will be executed when the component is unmounted.

useEffect(() => {
  // mount
  return () => {
   // unmount
  }
}, [])

Uses almost the same way as useEffect, but its execution is synchronous and will block the UI.

useLayoutEffect(() => {
  // In mount or flag changed, do some thing
}, [flag])

useMemo has the same rules as useEffect, but useMemo returns a cached value.

const list = [0,1,2,3]

const el = useMemo(() => {
  return list.map(n=>{
   return <li key={n}>{n}</li>
  })
}, [list])

useCallback is based on useMemo, which returns a cached function.

const cb = useCallback(() => {
  console.log('cached')
}, [])

useRef will return an object, if mounted on the element, the actual DOM of the element will be assigned to ref.

const App = () => {
  useEffect(() => {
    console.log(elRef) // { current: HTMLDIVElement }
  })
  const elRef = useRef(null)
  return <div ref={elRef}>t</div>
}

const App = () => {
  return <>something</>
}

The current project is still in the optimization stage, and will continue to follow the direction of react in the future, adding more comprehensive code comments. You are welcome to make various suggestions, as well as pr and issue.

Recept is MIT licensed.