Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[react] 什么渲染劫持? #949

Open
haizhilin2013 opened this issue Jul 18, 2019 · 7 comments
Open

[react] 什么渲染劫持? #949

haizhilin2013 opened this issue Jul 18, 2019 · 7 comments
Labels
react react

Comments

@haizhilin2013
Copy link
Collaborator

[react] 什么渲染劫持?

@haizhilin2013 haizhilin2013 added the react react label Jul 18, 2019
@liuxsen
Copy link

liuxsen commented Jul 24, 2019

hoc 重写render props state都可以

@MagicalBridge
Copy link

首先,什么是渲染劫持:渲染劫持的概念是控制组件从另一个组件输出的能力,当然这个概念一般和react中的高阶组件(HOC)放在一起解释比较有明了。

高阶组件可以在render函数中做非常多的操作,从而控制原组件的渲染输出,只要改变了原组件的渲染,我们都将它称之为一种渲染劫持

实际上,在高阶组件中,组合渲染和条件渲染都是渲染劫持的一种,通过反向继承,不仅可以实现以上两点,还可以增强由原组件render函数产生的React元素。

实际的操作中 通过 操作 state、props 都可以实现渲染劫持

@idododu
Copy link

idododu commented Dec 31, 2019

渲染劫持(Render Hijacking)
https://stackoverflow.com/questions/48144659/what-is-render-hijacking-in-react

@UserRegistering
Copy link

我的理解:
什么是渲染劫持?来分析一下这个词汇。渲染主要指的是组件中的render函数return的JSX语法部分。劫持呢?如果我们在组件内部去修改JSX语法,这不叫劫持,这是分内的事情。劫持指的是在本不应该修改到JSX语法的地方修改了它。怎么实现呢?一般都是通过继承被劫持的组件。
HOC(高阶组件)有一种反向继承的用法。当然,不止HOC,我们也可以新写一个组件,继承一个已有的组件,在这里就可以随意修改render函数,使用state、props这些状态数据,改变了原组件的渲染,这就叫渲染劫持。

@wjrhyw
Copy link

wjrhyw commented Apr 17, 2020

可以理解为通过高阶组件的反向继承,高阶组件可以去控制被包裹组件的渲染行为,也就是说可以通过state,props,各种状态来决定如何渲染

@Junrui-L
Copy link

一般都是通过继承被劫持的组件。HOC
(高阶组件)有一种反向继承的适当。当然,不止HOC,我们也可以新写一个组件,继承一个已有的组件,在这里就可以随意修改渲染函数,使用状态,props这些状态数据,改变了原组件的渲染,从而叫渲染劫持。

@ouuz
Copy link

ouuz commented Mar 15, 2021

第一次看到这个概念是在HOC的时候,是通过return 一个继承被劫持的组件,通过反向继承的方法,来获取被劫持组件的一些状态值来进行是否渲染被劫持组件的判断

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
react react
Projects
None yet
Development

No branches or pull requests

8 participants