将动画值（<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<ul class="nav nav-pills">
<li class="pull-left">
<a href="/"><img src="/static/logo.png" alt=""></a>
</li>
<li class="pull-right" style="margin-left: 20px;">
<div class="dropdown">
<a href="#" class="btn dropdown-toggle" id="accountDropdownMenu" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <strong>admin <span class="caret"></span></strong></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li class="dropdown-header"> <span class="label label-success"><i class="glyphicon glyphicon-star"></i> PREMIUM MEMBER</span></li>
<li class="divider"></li>
<li><a role="menuitem" href="/account/sell/products.html"><i class="glyphicon glyphicon-record"></i> Products</a></li>
<li><a role="menuitem" href="/account/messages.html"><i class="glyphicon glyphicon-envelope"></i> Messages <span class="badge badge-success">0</span></a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-star"></i> Favorites</a>
<ul class="dropdown-menu dropdown-menu-left">
<li><a role="menuitem" href="/account/favorite-items.html">Items <span class="badge badge-success">0</span></a></li>
<li><a role="menuitem" href="/account/favorite-searches.html">Search <span class="badge badge-success">0</span></a></li>
</ul>
</li>
<li class="divider"></li>
<li><a role="menuitem" href="/account"><i class="glyphicon glyphicon-dashboard"></i> Dashboard</a></li>
<li class="divider"></li>
<li><a role="menuitem" href="/admin/"><i class="glyphicon glyphicon-cog"></i> Admin panel</a></li>
<li class="divider"></li>
<li><a role="menuitem" href="/logout.html"><i class="glyphicon glyphicon-log-out"></i> Logout</a></li>
</ul>
</div>
</li>
<li class="pull-right" style="margin-left: 20px;"><a role="menuitem" href="/account/add-product.html">Add product</a></li>
</ul>
</div></div>
<div class="row">
<div class="page-header">
<div class="pull-right">
<form action="/" method="GET">
<input type="text" name="q" placeholder="Search market..." size="20" value="">
<button class="btn btn-xs btn-primary" type="submit">Search</button>
</form>
<form action="" method="GET">
Sort by:
<select name="sort">
<option value="-date">Date added</option>
<option value="price">Lower price</option>
<option value="-price">Higher price</option>
<option value="-orders">Best Sellers</option>
</select>
<button class="btn btn-xs btn-primary" type="submit">Apply</button>
</form>
</div>
<h1>New
</h1>
</div>
</div>
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="/category/app-1.html">app
<span class="badge pull-right">
1
</span>
</a>
</li>
<li>
<a href="/category/software-2.html">software
<span class="badge pull-right">
1
</span>
</a>
</li>
<li>
<a href="/category/voucher-3.html">voucher
<span class="badge pull-right">
0
</span>
</a>
</li>
</ul>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail product">
<h5><a href=" /product/product-4-24820861725.html ">product 4</a></h5>
<a href=" /product/product-4-24820861725.html ">
<p>
<img src="/static/uploads/16/thumb.02556996-product-4.jpg">
</p>
</a>
<span class="label label-info"><i class="glyphicon glyphicon-tag"></i>app</span>
<span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>
<div class="panel-footer">
1.00 $
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3">
<div class="thumbnail product">
<h5><a href=" /product/product-111-22234646298.html ">product 111</a></h5>
<a href=" /product/product-111-22234646298.html ">
<p>
<img src="/static/uploads/15/thumb.91861739-product-111.jpg">
</p>
</a>
<span class="label label-info"><i class="glyphicon glyphicon-tag"></i>software</span>
<span class="label label-info"><i class="glyphicon glyphicon-user"></i> admin</span>
<div class="panel-footer">
1.00 $
</div>
</div>
</div>
</div>
<nav>
<ul class="pagination">
</ul>
</nav>
</div>
</div>
<br><br>
<div class="panel panel-default">
<div class="panel-body">
<div> © 2016
<a href="/">selfmarket.net</a> /
<a href="/atom.xml">RSS Feed</a> /
<a href="/static/sitemap.xml">sitemap.xml</a>
</div>
</div>
</div>
</div>）保留为状态属性还是可以将其设置为类属性是否更好？
示例：
fadeAnim 澄清：
我知道国家用于反应的和解。反应原生＆＃39; class ModalShade extends React.Component {
fadeAnim = new Animated.Value(0)
render() {
return (
<Animated.View
cls="bg-black absolute-fill"
style={{ opacity: this.fadeAnim }}
/>
)
}
componentDidMount() {
Animated.spring(
this.fadeAnim, {
toValue: 0.6,
tension: 100,
friction: 20
}
).start();
}
}
值绕过通常的render（），因此即使没有状态更改，组件也会更新。
我在Animated中比较Animated.Value时没有看到任何意义，这就是我将其移出州的原因。
答案 0 :(得分：1)
一般来说，使用React，将某些内容存储为实例/类属性（例如this.myVar =＆＃39; foo＆＃39;;）或处于状态之间存在很大差异。区别在于React使用状态对象来确定何时重新呈现组件（即再次调用render（））。
如果您将变量存储为类/实例属性然后更改它，则React呈现逻辑不会对该更改有任何了解，因此您不会在呈现的UI中看到任何更改。
因此，您应该在状态中存储更改组件的渲染输出的内容。如果变量不会影响所有渲染的输出（并且在基本上没有变化时也不小心通知），那么您可以将其存储为实例/类属性。有时这会产生更好的性能影响，因为更新该变量的setState调用会触发不必要的渲染。
在您的示例中，您省略了render方法，但您很可能需要访问状态中的fadeAnim变量才能实际执行动画。基本上，Animated.spring只是随着时间的推移插入一些值，但是你需要使用那些插值来实际动画一些东西。
在文档示例（https://facebook.github.io/react-native/docs/animated.html）中，您可以看到this.state.fadeAnim内部使用render来控制（动画）不透明度样式。
总结一下，您需要将fadeAnim存储在特定状态，因为值的更改应触发重新渲染。
答案 1 :(得分：1)
最好遵循官方文档并使用州财产。 这有两个很好的理由：
setState调用并重新渲染动画组件的更改。这是来自官方文档的引用当组件安装时，不透明度设置为0.然后，在fadeAnim动画值上启动缓动动画，该值将更新每个帧上的所有相关映射（在本例中，只是不透明度）作为值动画到最终值1。
这是以优化的方式完成的，比调用setState和重新渲染更快。