-
代理方式的高阶组件继承自React.Component
继承方式的高阶组件继承自它传入的组件
查看全部 -
多个组件都需要某个相同的功能,使用高阶组件减少重复实现
查看全部 -
装饰器 package.json--> scripts内eject
npm run eject
查看全部 -
高阶组件就是接受一个组件作为参数并返回一个新组件的函数。 高阶组件不是组件,是一个函数。
查看全部 -
高阶函数基本概念:
函数可以作为参数被传递
函数可以作为返回值输出
查看全部 -
其中,使用装饰器模式需要安装两个依赖:
babel-preset-stage-2
babel-preset-react-native-stage-0
还需要配置.babelrc
{
"presets": ["react-native-stage-0/decorator-support"]
}
查看全部 -
高阶组件使用的两种方式
查看全部 -
代理方式的高阶组件:四种
查看全部 -
高阶组件应用
查看全部 -
使用装饰器
查看全部 -
插件查看全部
-
显示高阶组件名称
可调试查看
查看全部 -
继承方式的高阶组件
操作props(根据子组件的渲染结果来决定props)
操作生命周期函数(修改掉原始组件的生命周期内容)
查看全部 -
代理方式的高阶组件
可操作props被包裹组件的属性的增加或删除
被包裹组件添加ref="this.refc.bind(this)"
在高阶组件中添加refc(instance){{instance.getName&&alert(instance.getName)}}
可访问被包裹组件的任何功能,容易出问题不常用
状态抽取
1、把受控组件的状态和事件抽取到高阶组件
2、被包括的组件就不需要这个state和事件了
包装组件(即在高阶组件用其他标签添加任意的标签)
查看全部 -
高阶组件
方式二,装饰器方式,开发步骤:
1、运行package.json运行eject脚本,暴露输出配置项
2、安装依赖
cpnm i -D babel-preset-stage-2
cpnm i -D babel-preset-react-native-stage-0
3、根目录新建.babelrc文件
{
"presets":["react-native-stage-0/decorator-support"]
}
4、export default d(B)改成B
并直接在class上写上@d注解
查看全部
举报