-
其中,使用装饰器模式需要安装两个依赖:
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注解
查看全部 -
高阶组件是一个可以包裹返回class的函数
方式一,函数方式,开发步骤:
1、写一个函数d,用wrappedComponent作为参数;返回class,class的内部使用wrappedComponent
2、export default 函数名d
3、在使用处用高阶组件包裹导出,export default a(A组件)
查看全部 -
高阶函数的基本概念
查看全部 -
查看全部
-
dislayName效果查看全部 -
组件显示名称(可用于debug):displayName属性
查看全部 -
高阶函数基本概念:
函数可以作为参数被传递
函数可以作为返回值输出
查看全部
举报