React Js之组件（Component）与state-优快云博客

本文介绍了ReactJS中的组件概念，包括组件的定义、State的作用及如何使用。通过一个具体实例展示了如何构建并组织组件，实现界面的高效管理和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　React Js组件：

　　　　组件（Component）是为了更好的维护我们的应用，可以在不影响其他的组件的情况下更新或者更改组件。

　　　　state:是标记数据的来源，我们使state比较简单和单一，如果我们有是个相应的state，我们应该进行相应的封装，我们应该创建一个容器组件来保存所有的值。

　　　　如下面代码：

　　import React from 'react'
　　class App extends React.Component{

    　　//有状态的值
    　　constructor(){
        　　super();

        　　this.state = {
            　　data:[
                　　{"id":"1","name":"rtony","age":"20"},
                　　{"id":"2","name":"xuanyi","age":"20"},
                　　{"id":"3","name":"tony","age":"20"},
                　　{"id":"4","name":"jimeth","age":"20"},
            　　]
        　　}
    　　}

    　　render(){
        　　return (
            　　<div>
                　　<Header />
                　　<Content/>
                　　<table>
                    　　<tbody>
                        　　{/****注意这里是使用key={i}在map方法中，这将有助于之更新必要的元素，而不是在发生变化时重新绘制整个列表，对于大量动态创建的元素来说，这是一个巨大的性能提升****/}
                        　　{this.state.data.map((person,i) => <TableRow key={i} data={person} />)}
                    　　</tbody>
                　　</table>
            　　</div>
        　　);
    　　}
　　}
class Header extends React.Component{
    render(){
        return(
            <div>
                <h1>header</h1>
            </div>
        );
    }
}

class Content extends React.Component{
    render(){
        return (
            <div>
                <h2>Content</h2>
                <p>this is a content!</p>
            </div>
        );
    }
}

class TableRow extends React.Component{
    render() {
        return (
            <tr>
                <td>{this.props.data.id}</td>
                <td>{this.props.data.name}</td>
                <td>{this.props.data.age}</td>
            </tr>
        );
    }
}
export default App;
上面的例子中，有三个组件，这三个组件将app的界面分为了三个部分，一个是App主组件，还有其余的子组件header和content，这使界面更容易维护和更新，加入我们需要修改header或者content的内容，只需要改相应的组件就可以了。