22 個讓 React 開發(fā)更高效更有趣的工具

import React from 'react'import Button from '@material-ui/core/Button'
const Child = (props) => 

const Child2 = ({ children, ...props }) => (  
    {children}   
)
Child2.whyDidYouRender = true
const App = () => {  const [state, setState] = React.useState({})
  return (    
      {JSON.stringify(state, null, 2)}      
         setState({ hello: 'hi' })}>          Submit              
      Child #2    
  )}
export default App

npx create-react-app  --typescript

import React from 'react'import {  Log,  VisualizerProvider,  traceLifecycle,} from 'react-lifecycle-visualizer'
class TracedComponent extends React.Component {  state = {    loaded: false,  }
  componentDidMount() {    this.props.onMount()  }
  render() {    return 
Traced Component  }}
const EnhancedTracedComponent = traceLifecycle(TracedComponent)
const App = () => (            )

// Hoist helper functions (but not vars) to reuse between test casesconst renderComponent = ({ count }) =>  render(              ,  )
it('renders initial count', async () => {  // Render new instance in every test to prevent leaking state  const { getByText } = renderComponent({ count: 5 })
  await waitForElement(() => getByText(/clicked 5 times/i))})
it('increments count', async () => {  // Render new instance in every test to prevent leaking state  const { getByText } = renderComponent({ count: 5 })
  fireEvent.click(getByText('+1'))  await waitForElement(() => getByText(/clicked 6 times/i))})

import React from 'react'import FileView from './src/components/FileView'
const App = (props) => 
export default App