前端框架和库：React：React与RESTfulAPI交互.docxVIP

PAGE1

PAGE1

前端框架和库：React：React与RESTfulAPI交互

1React基础回顾

1.1React组件和状态

在React中，组件是构成用户界面的基本单元。每个组件都可以有自己的状态（state），状态用于存储组件的动态数据。当组件的状态改变时，组件会重新渲染，显示新的状态数据。

1.1.1代码示例：使用状态的React组件

importReact,{Component}fromreact;

classGreetingextendsComponent{

constructor(props){

super(props);

this.state={

name:World

};

}

handleChange=(event)={

this.setState({name:event.target.value});

};

render(){

return(

div

h1Hello,{}!/h1

inputtype=textvalue={}onChange={this.handleChange}/

/div

);

}

}

exportdefaultGreeting;

解释:-Greeting组件有一个初始状态name，默认值为World。-handleChange方法用于更新状态，当输入框的值改变时，会调用这个方法，更新name状态。-render方法中，状态name被用于显示问候语，并且输入框的值与状态同步。

1.2React生命周期方法

React组件有多个生命周期方法，它们在组件的不同阶段被调用，可以帮助我们更好地控制组件的行为。

1.2.1代码示例：使用生命周期方法的React组件

importReact,{Component}fromreact;

classLifecycleDemoextendsComponent{

constructor(props){

super(props);

this.state={

data:[]

};

}

componentDidMount(){

fetch(/data)

.then(response=response.json())

.then(data=this.setState({data}));

}

render(){

return(

div

h2DatafromAPI:/h2

ul

{this.state.data.map(item=(

likey={item.id}{}/li

))}

/ul

/div

);

}

}

exportdefaultLifecycleDemo;

解释:-componentDidMount方法在组件挂载到DOM后被调用，这里用于发起API请求。-请求的数据被存储在组件的状态data中。-render方法中，状态data被用于渲染从API获取的数据列表。

1.3ReactHooks简介

ReactHooks是React16.8版本引入的新特性，允许我们在不编写类组件的情况下使用状态和其他React特性。Hooks使函数组件可以使用状态和副作用。

1.3.1代码示例：使用useState和useEffect的React组件

importReact,{useState,useEffect}fromreact;

functionHooksDemo(){

const[data,setData]=useState([]);

useEffect(()={

fetch(/data)

.then(response=response.json())

.then(data=setData(data));

},[]);

return(

div

h2DatafromAPI:/h2

ul

{data.map(item=(

likey={item.id}{}/li

))}

/ul

/div