本文精选了22款React开发工具，涵盖性能分析、原型设计、代码优化、项目管理和测试等多个方面，助力开发者构建高效、高质量的React应用。
猴子补丁: 这个叫法起源于 Zope 框架，大家在修正 Zope 的 Bug 的时候经常在程序后面追加更新部分，这些被称作是“杂牌军补丁（guerilla patch）”，后来 guerilla 就渐渐的写成了 gorllia（猩猩），再后来就写了monkey（猴子），所以猴子补丁的叫法是这么莫名其妙的得来的。
import React from 'react'import Button from '@material-ui/core/Button'
const Child = (props) => <div {...props} />
const Child2 = ({ children, ...props }) => ( <div {...props}> {children} <Child /> </div>)
Child2.whyDidYouRender = true
const App = () => { const [state, setState] = React.useState({})
return ( <div> <Child>{JSON.stringify(state, null, 2)}</Child> <div> <Button type="button" onClick={() => setState({ hello: 'hi' })}> Submit </Button> </div> <Child2>Child #2</Child2> </div> )}
export default App
npx create-react-app <name> --typescriptimport 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 <h2>Traced Component</h2> }}
const EnhancedTracedComponent = traceLifecycle(TracedComponent)
const App = () => ( <VisualizerProvider> <EnhancedTracedComponent /> <Log /> </VisualizerProvider>)
// Hoist helper functions (but not vars) to reuse between test casesconst renderComponent = ({ count }) => render( <StateMock state={{ count }}> <StatefulCounter /> </StateMock>, )
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))})
用属性、上下文和状态的任意组合下渲染组件
模拟每个外部依赖项（例如 API 响应、localStorage 等）
与正在运行的实例进行交互时，查看应用程序状态的实时变化
import React from 'react'import FileView from './src/components/FileView'
const App = (props) => <FileView {...props} />
export default App
与 React Native 相同的语法
适用于现存的 React 库，例如 Redux
跨平台
原生组件，不再有 Electron
与所有正常的 Node.js 包兼容
https://segmentfault.com/a/1190000020860324
开发者技术前线 ，汇集技术前线快讯和关注行业趋势，大厂干货，是开发者经历和成长的优秀指南。
扫一扫
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
