Javascript react中的双向绑定，如AngularJS_Javascript_Angularjs_Reactjs

Javascript react中的双向绑定，如AngularJS

javascript angularjs reactjs

Javascript react中的双向绑定，如AngularJS,javascript,angularjs,reactjs,Javascript,Angularjs,Reactjs,在AngularJS中，我可以做到： <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> Name: <input ng-model

在AngularJS中，我可以做到：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";    
});
</script>

</body>
</html>


姓名：
{{firstname}}
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.firstname=“John”；
$scope.lastname=“Doe”；
});

在React中执行此操作的等效方法是什么？以下是我尝试过的：

var app = document.getElementById("app");



var Main = React.createClass({
  getInitialState: function(){
    return {text: ""};
  },
  change: function(e){
    var newValue = e.target.value;
    this.setState({text: newValue});
  },
  render: function(){
    return (
      <div>
        <input onChange={this.change} type="text"/>
        <h1>{this.state.text}</h1>
      </div>
      );
  }
});


React.render(<Main />, app);

var-app=document.getElementById（“app”）；
var Main=React.createClass({
getInitialState:函数（）{
返回{text:：}；
},
更改：功能（e）{
var newValue=e.target.value；
this.setState（{text:newValue}）；
},
render:function（）{
返回(
{this.state.text}
);
}
});
React.render（，app）；

这是实现这一目标的最佳方式吗？

这条路似乎有点慢。你能建议另一种方法吗？

是的，这似乎是一种合理的方法。这“似乎”很慢是什么意思？@azizpunjani在我看来，每次更改更新视图都很慢。我知道angular也会这样做，但也许他们有更好的方法来代替使用onChange attributeThinking in React要求我们停止考虑双向绑定，开始考虑单向数据流。数据向上流动，事件向上流动。另外，如果您关心渲染性能，请阅读Reacts VDOM。@lux数据向下流动：-）@azizpunjani是的，显然是一个打字错误--很好，是的，这似乎是一个合理的方法。这“似乎”很慢是什么意思？@azizpunjani在我看来，每次更改更新视图都很慢。我知道angular也会这样做，但也许他们有更好的方法来代替使用onChange attributeThinking in React要求我们停止考虑双向绑定，开始考虑单向数据流。数据向上流动，事件向上流动。另外，如果您关心渲染性能，请阅读Reacts VDOM。@lux数据向下流动：-）@azizpunjani是的，显然是一个打字错误-很好的捕获