react
cm_xuan77
这个作者很懒,什么都没留下…
展开
-
React 之 错误边界
默认情况下,若一个组件在渲染期间(render)发生错误,会导致整个组件树全部被卸载错误边界:是一个组件,该组件会捕获到渲染期间(render)子组件发生的错误,并有能力阻止错误继续传播组件中添加捕获错误1.编写生命周期函数 getDerivedStateFromError 1.该函数为静态函数 static getDerivedStateFromError 2.运行时间点:子组件被...原创 2020-01-19 19:33:30 · 289 阅读 · 0 评论 -
React 之 PureComponent
用于避免重复渲染(执行render函数),提高效率以下面的示例:// taskContainer 组件class TaskContainer extends Component { state = { taskList: [] }; componentDidMount() { const task = []; for (let i = 0; i <...原创 2020-01-17 18:29:59 · 271 阅读 · 0 评论 -
React 之 Render Props
有时候,某些组建的各种功能及其处理逻辑几乎完全相同,只是显示的界面不一样,建议下面的方式选择其一来解决重复代码的问题(横切关注点)实现这两个组建,我们通常的写法是:// MoveBoxclass MoveBox extends PureComponent { state = { x: 0, y: 0 }; myRef = React.createRef();...原创 2020-01-17 18:29:04 · 280 阅读 · 0 评论 -
React - context
context1.组件创建上下文之后,上下文中的数据会被所有的后代组件共享2.组件依赖上下文,会导致组建不再纯粹依赖state和props旧的api创建上下文只有类组件才可以创建上下文1.给类组件书写静态属性childContextTypes,使用该属性对上下文中的数据类型进行约束2.添加实例方法 getChildContext,该方法返回的对象,即为上下文中的数据,该数据必须满足类...原创 2020-01-16 18:41:51 · 304 阅读 · 0 评论 -
React - ref
reference 引用function A (){ return (<h1>组件AAA</h1>)}<A ref="comA" /> // 不可这样使用,但是函数组件内部是可以使用ref的过时方式(不要使用)以聚焦input事件为例,以前的ref使用方式,ref 值为string已经过时,随时可能被移除(不建议使用,在16版中已不再可...原创 2020-01-15 16:47:19 · 128 阅读 · 0 评论