×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 16 –功能(无状态)与类(有状态)组件

    课程清单

    在上一课中,我们学到了很多关于状态和道具的知识,这是导致湖北福彩在发生某些更改时升级您的DOM的唯一两件事。

    功能(无状态)与类(有状态)组件

    Now I also mention that when creating a component as a function as we have done for a component. We cant use state in there because of it just a function where we return some JSX code.
    Granted we could run other code before doing that and you often do that if you need to transform your props for us or something like that but you can’t set up a state property, you cant call the setState() because it is not a class extending component.
    The setstate() method is not known and we don’t have methods anyways its not a class, it is a function. And still I mentioned that you should use the function form of components as often as possible and I will emphasize that here one more time, why it is so Important?

    –因为–

    基于功能的组件只是接收道具的函数,非常清楚它们的作用。
    它们仅向DOM呈现内容。由于道具的原因,它们是动态的,您可以在调用return之前添加一些其他逻辑,但这非常重要。他们不会操纵您的应用程序状态,随着您的应用程序增长,您会发现这并不是那么重要,这实际上非常重要。
    应用程序的大多数部分都不应更改应仅向DOM呈现某些内容的应用程序状态。动态的,是的!但是它们不应该允许您更改应用程序状态。
    您的应用程序状态仅应更改并处理在几个选定的组件(也称为容器)中。 App.js 就是这样的容器。那只是另一个名称,它是一个组件,但我们将其称为容器,因为它包含我们应用程序状态的一部分。

    src / App.js
    
    ...
    class App extends Component {
    	state = {
    		persons: [{ name: 'Lucy', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
    	};
    	switchNameHandler = () => {
    		this.setState({
    			persons: [{ name: 'Lucy Stifert', age: 23 }, { name: 'Max', age: 12 }, { name: 'Mike', age: 34 }],
    		});
    	};
    	render() {
    		return (
    			<div className="App">
    				<button onClick={this.switchNameHandler}>Switch Name</button>
    				<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
    				<Person name={this.state.persons[1].name} age={this.state.persons[1].age} />
    				<Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
    			</div>
    		);
    	}
    }
    export 默认 App;
    

    in our Demo application actually all of the application state where we cant change something about our app and then we pass changes down to our application i.e. setState({}) for example 组件它。
    变化发生在 App.js 一旦我们开始构建课程项目,您就会看到我使用此模式。我将使用状态实际存在并被更改的一些组件,以及许多需要一些输入然后仅将某些内容呈现到屏幕上但不会直接操纵状态的组件。

    仍然可能有些情况下,也许所有人都希望在person组件或另一个组件中监听事件。
    Now ofcourse turn the component in to a component which extends Components class so that you can find methods which you execute but maybe you want to listen to any event in component but execuate method in App.js 这样您就可以保持更改名称的模式 App.js 但实际上列出了其他组件中的事件。


    让我们看一下如何在下一课中处理该问题并更改其他组件的状态

    反应introduction
    反应Component
    功能(无状态)与类(有状态)组件
  • 启用通知    不用了,谢谢