前端框架和库：React：React组件与生命周期.docxVIP

PAGE1

PAGE1

前端框架和库：React：React组件与生命周期

1React组件基础

1.1组件的定义与使用

在React中，组件是构成用户界面的基本单元。它们可以被看作是React应用的“积木”，使得代码更加模块化和可重用。组件可以接收外部输入（props）并返回React元素，描述应该在屏幕上渲染什么。

1.1.1函数组件

函数组件是最简单的React组件形式，它是一个返回React元素的纯函数。函数组件接收一个参数props，并返回一个描述UI的React元素。

//函数组件示例

functionWelcome(props){

returnh1Hello,{}/h1;

}

//使用函数组件

ReactDOM.render(Welcomename=Stitch/,document.getElementById(root));

1.1.2类组件

类组件是通过继承React.Component类来定义的。类组件可以拥有状态（state）和生命周期方法，使其能够处理更复杂的UI逻辑。

//类组件示例

classClockextendsReact.Component{

constructor(props){

super(props);

this.state={date:newDate()};

}

componentDidMount(){

this.timerID=setInterval(

()=this.tick(),

1000

);

}

componentWillUnmount(){

clearInterval(this.timerID);

}

tick(){

this.setState({

date:newDate()

});

}

render(){

return(

div

h1Hello,world!/h1

h2Itis{this.state.date.toLocaleTimeString()}./h2

/div

);

}

}

//使用类组件

ReactDOM.render(Clock/,document.getElementById(root));

1.2组件的属性props

props是组件的属性，用于传递数据和行为给组件。它们是只读的，不应该在组件内部被修改。

1.2.1传递props

//使用props

functionGreeting(props){

returnh1Hello,{}!/h1;

}

ReactDOM.render(Greetingname=Stitch/,document.getElementById(root));

1.2.2默认props

如果组件没有接收到某些props，可以为它们设置默认值。

//设置默认props

classGreetingextendsReact.Component{

staticdefaultProps={

name:World

};

render(){

returnh1Hello,{}!/h1;

}

}

ReactDOM.render(Greeting/,document.getElementById(root));

1.3组件的状态state

state是组件的内部状态，用于存储组件的动态数据。与props不同，state可以在组件内部被修改，从而触发组件的重新渲染。

1.3.1初始化state

在类组件中，state通常在构造函数中初始化。

classCounterextendsReact.Component{

constructor(props){

super(props);

this.state={count:0};

}

incrementCount(){

this.setState({count:this.state.count+1});

}

render(){

return(

div

pCount:{this.state.count}/p

buttononClick={()=this.incrementCount()}Increment/button

/div

);

}