猴子补丁: 这个叫法起源于 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> --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 <h2>Traced Component</h2>
}
}
const EnhancedTracedComponent = traceLifecycle(TracedComponent)
const App = () => (
<VisualizerProvider>
<EnhancedTracedComponent />
<Log />
</VisualizerProvider>
)
// Hoist helper functions (but not vars) to reuse between test cases
const 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
开发者技术前线 ,汇集技术前线快讯和关注行业趋势,大厂干货,是开发者经历和成长的优秀指南。
![](https://i-blog.csdnimg.cn/blog_migrate/46ca95aed57d3a2094939467756662d2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/49b797bcebfd44d14cbd29b4c6b971ca.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7d5a638fdbd20bab7533ae19e46df87b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/49b797bcebfd44d14cbd29b4c6b971ca.png)