小编Jon*_*wag的帖子

我目前正在使用角动画.因此,我想出了将动画附加到组件的两种可能方法.在下文中,我将它们描述为State/Transition-Animations和Query-Animations.

在这个问题中,我主要想知道一种或另一种方式是否存在性能差异!？

1.状态/过渡动画

html的

<div [@animation_foo]/>

.TS

trigger('animation_foo', [
    state('true', style({...}),
    state('false', style({...})       
    transition('true => false', animate(...)
]

2.查询动画

html的

<div [@animation_foo]>
    <div class="bar"/>
</div>

.TS

trigger('animation_foo', [
    query('.bar', style({...}), animate('10ms', style({...}))
]

进一步思考:

• 我主要关心点2.查询是:

  1. 如果你没有一个查询而只有多个,那么通过group(...)组合,css选择器将在更深层次上找到元素('.foo>:nth-​​child(n + 3).bar'你必须迭代DOM-Tree的很大一部分.
  2. 应用于元素的样式和动画在找到元素之后和动画之前发生 - 每次 - 因为我期望它不能由编译器预编译？

• 环境/目标平台:我知道它可能与休闲Web应用程序无关,但我尝试在具有多个路由器,嵌套组件和大量ngIf的ngFors的大型企业应用程序中思考,以便我个人可以想象查询所有可能的做一些努力.

• 浏览器:我知道浏览器的行为方式不同.我个人目前只对Chrome感兴趣 - 但为了社区,一般的答案会很棒.

如果您有任何重要的信息需要注意,分享(错误,...)会很好

上周我回答了一个 RxJS问题，在那里我与另一位社区成员进行了讨论：“我应该为每个特定的副作用创建订阅，还是应该尽量减少订阅？” 我想知道在完全反应式应用程序方法或何时从一种切换到另一种方法方面使用什么方法。这将帮助我和其他人避免不必要的讨论。

设置信息

• 所有示例都在 TypeScript 中
• 为了更好地关注问题，不要使用生命周期/构造函数进行订阅并保持框架无关
  • 想象一下：在构造函数/生命周期初始化中添加订阅
  • 想象一下：取消订阅是在生命周期销毁中完成的

什么是副作用（Angular 示例）

• UI 中的更新/输入（例如value$ | async）
• 组件的输出/上游（例如@Output event = event$）
• 不同层次上不同服务之间的交互

示例用例：

• 两个功能： foo: () => void; bar: (arg: any) => void
• 两个源可观察值： http$: Observable<any>; click$: Observable<void>
• foo在http$发出后调用并且不需要值
• bar在click$发出后调用，但需要当前值http$

案例：为每个特定的副作用创建订阅

const foo$ = http$.pipe(
  mapTo(void 0)
);

const bar$ = http$.pipe(
  switchMap(httpValue => click$.pipe(
    mapTo(httpValue)
  )
);

foo$.subscribe(foo);
bar$.subscribe(bar);

案例：一般最小化订阅

http$.pipe(
  tap(() => foo()),
  switchMap(httpValue => click$.pipe( …

我想设置tintColor我的png Image动态.Actuall我试图在state属性上设置颜色,并使用单独的函数更改它们setState.

我的代码是这样的(期望在以下代码片段的上方和周围一切正常):

class dynamicImageColor extends Component{
    constructor(props) {
        super(props);
        this.state = {
            myDynamicColor: '#ffffff'
        }
    }

changeColor(bool){
    if(bool === true)
    {
        this.setState({
            myDynamicColor: '#932727'
        })
    }if(bool === false)
    {
        this.setState({
            myDynamicColor: '#ffffff'
        })
    }
}

render(){
    return(
        <Image source={myPNGImage} style={styles.PNGImageStyle}/>
    )
}


var styles = StyleSheet.create({
    PNGImageStyle: {
        tintColor: this.state.myDynamicColor,
        width: 25,
        height: 25
    }

如果我设置tintColor静态,上面代码中的所有内容都可以正常工作.而函数changeColor(bool)在其他一些不相关的地方被调用并且工作正常.

我的实际问题是我收到错误消息:

undefined不是对象(evaluate'this.state.myDynamicColor

我还想看看是否有错误的值传输.但控制台显示正确的'#ffffff'hex_code格式myDynamicColor

我不知道进一步,帮助会非常好.如果你给我一个更好的解决方案,我也很高兴:)

谢谢BR Jonathan

预先信息：

我仍然打开了一个Firebase项目，并且我仍在成功使用Firebase数据库（因此可以 firebase.initializeApp(config) 正常工作）。我在Firebase Storage的“ / Images / ” 文件夹中上传了几张图片，并将它们命名为image1.jpg，image2.jpg ..

React-Native：0.31.0，Firebase：3.3.0

我想要的是：

我想从Firebase存储中获取映像并将其放入 <Image>

我实际上做了什么：

var storageRef = firebase.storage().ref('Images/image1.jpg');

//1. Try:
storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//2. Try:
var sampleImage = storageRef.getDownloadURL().then(function(url) {
  console.log(url);
)}

//3. Try:
var sampleImage = storageRef.getDownloadURL();

有关代码的信息：

1. 该代码没有到达console.log(url)点

   2.1。试图在对象中使用sampleImageas ：空白图片source<Image>

   2.2。尝试log过sampleImage：undefined

   2.3。尝试log过url：没有达到这一点

   3.1。试图在对象中使用sampleImageas ：空白图片source<Image>

   3.2。尝试log过sampleImage …