Question

我是ReactJS的新手。我发现props＆amp; state用于反应绑定。

Angular范围和ReactJS状态的核心区别是什么？

Answer 1

Angular： $scope默认为双向。当您在HTML中使用它们时，Angular会跟踪$ scope的每个DOM使用情况，并监视用户的更新。角度控制器几乎可以立即了解它。

React： state默认为单向。从React获取数据涉及为每个输入编写onChange处理程序。此外，这些事件处理程序需要使用this绑定到您的this.inputOnChange.bind(this)变量。

对于React中的双向数据绑定，您可以使用 twio 之类的内容。它消除了onChange事件处理程序方法，简化了组件接口，并为您处理.bind(this)。

import Twio from "twio";
class SignUp extends Component {
  constructor() {
    this.state = {
      firstName: Twio(firstName => this.setState({firstName})),
      lastName: Twio(lastName => this.setState({lastName})),
      email: Twio(email => this.setState({email})),
      password: Twio(password => this.setState({password})),
    };
  }
  render() {
    return (
      <form>
        <input type="text" value={this.state.firstName} 
          onChange={this.state.firstName.onChange} />
        <input type="text" value={this.state.lastName} 
          onChange={this.state.lastName.onChange} />
        <input type="text" value={this.state.email} 
          onChange={this.state.email.onChange} />
        <input type="password" value={this.state.password} 
          onChange={this.state.password.onChange} />
      </form>
    );
  }
}

快乐的编码！

Answer 2

根据我对角度的一些旧经验，我会给你答案。

<强> Angularjs：
Angular的范围目的与ReactJS state和props不同，原因实际上是基于它的继承结构。基于角度github中的Understanding Scopes：

在AngularJS中，子范围通常原型继承自其父范围。一个例外是使用范围指令：{...} - 这将创建创建一个“可重用组件”当“隔离”的范围是不prototypically继承（与transclusion指令）这个结构经常被使用。指示。在指令中，默认情况下直接使用父作用域，这意味着您在指令中更改的来自父作用域的任何内容也将在父作用域中更改。如果设置scope：true（而不是scope：{...}），那么原型继承将用于该指令。

Angular的范围基本上是用于评估表达式并创建双向数据绑定，react的解决方案是不同的。

<强> ReactJS：

关于状态和道具之间差异的一点注意事项基于React FAQ here：

props（“属性”的缩写）和状态都是纯JavaScript对象。虽然两者都保存影响渲染输出的信息，但它们在一个重要方面是不同的：道具传递给组件（类似于函数参数），而状态在组件内管理（类似于函数中声明的变量）。

ReactJS实际上并没有提供开箱即用的双向数据绑定。每个反应组件都可以从它的父级获取道具。道具是单向数据绑定（@在以角度创建隔离范围时）。您无法在组件内部更改道具，因为道具在反应文档中是只读的here。如果您希望更改组件的道具，可以使用props内部的回调函数来更改保存在父级或任何状态管理方法（Redux，MobX等）中的某些值。以下是回调方法的示例：

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      counterForChildComponent: 0
    };

    this.incrementCounter = this.incrementCounter.bind(this);
  }

  incrementCounter() {
    const newState = !this.state.isSearchOpen;
    this.setState((prevState) => ({
      counterForChildComponent: prevState + 1
    }))
  }

  render() {
    const {counterForChildComponent} = this.state;
    return (
      <ChildComponent counter={counterForChildComponent} incrementCounter={this.incrementCounter}
    );
  }
}

和子组件：

const ChildComponent = (props) => (
  <div onClick={props.incrementCounter}>{props.counter}</div>
);

那是关于道具的。 state实际上是用于组件目的的数据存储。更改状态会导致特定生命周期的开始，以更新视图。如果您是新手，我会建议您查看有关州here

的反应文档中的一些重要通知

希望我回答你的问题，请随时再次提问。玩得开心。 React很有趣。

角度范围与反应状态如何对数据绑定起作用

2 个答案: