ReactJS-类组件

`类组件继承自React的Component类，具有一个组件的完整生命周期`

以下生命周期适用于React0.14.9版本，以上版本生命周期发生较大变化
componentDidMount:组件初次挂载到页面时执行，只会在组件挂载时执行一次
挂载的含义以后再进行解释，现在我也理解的不是很清除，也希望大神们可以给我留言教教我

组件的数据来源

`组件的数据来源有两种`：`Props`，`State`

Props来源于实例化组件时传递给组件的参数

<SimpleComponent
    title = "Simple Component"
    defaultText = "Type here"
/>

State
State以对象的形式保存在组件上,通常是调用方法setState方法去改变组件的state。
setState(updater,[,callback])方法接受两个参数，返回的是一个要更新this.state的对象，或者返回改对象的函数，callback是更新完成后的执行的回调函数。
setState是一个批量异步的操作，react会在短时间内批量更新，callback函数调用时才会访问到更新后的state

组件方法

setState():更新组件的State，有机会触发render()执行
forceUpdate():强制执行一次render()

数据传递

先上一段代码

import  * as React from 'react'
import * as ReactDOM from 'react-dom'
class SimpleComponent extends React.Component {
    state = {}
    componentDidMount() {
        this.setState({text: this.props.defaultText})
    }
    render() {
        return (
            <div>
                <h1>{
                    this.props.title
                }
                </h1>
                <div>
                    <input
                        type="text"
                        value={this.state.text}
                        onChange={(event) =>this.updateText(event.target.value)}
                    />
                </div>
                <div>
                    {this.state.text }
                </div>
            </div>)
    }
    updateText(text)
    {
        this.setState({text: text})
    }
}
class App extends React.Component {
    state = {
        title: 'initial title'
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({title: "title changed"})
        }, 1000)
    }
    render(){
        return(<SimpleComponent
            title={this.state.title}
            defaultText="Type here"
        />)
    }
}
ReactDOM.render(
    <div>
        {/*<SimpleComponent*/}
            {/*title = "iiii"*/}
            {/*defaultText = 'iuiuiihi'*/}
        {/*/>*/}
        <App />
    </div>,
    document.querySelector("#root")
)

运行的最终结果如图：

image.png

在 App挂载时，界面显示initial title，随后会触发一个定时器，1s之后显示title changed。写代码时要注意，render()函数一定要有return语句，不然运行后界面无内容

子组件与子元素

子组件是指在一个组件的render()函数中使用到的另一个组件，比如App中使用了SimpleComponent，则SimpleComponent是App的子组件。
子元素是JSX中组件的嵌套关系,input是div的子元素

 <div>
                    <input
                        type="text"
                        value={this.state.text}
                        onChange={(event) =>this.updateText(event.target.value)}
                    />
</div>

无状态组件

通常为纯函数形式，返回JSX片段。无状态组件没有state，接受props作为函数参数,通常进行一些数据展示的功能

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

ReactJS-类组件