前端开发工程师-前端框架和库-React.js_React状态管理.docx

PAGE1

PAGE1

React.js基础

1React组件生命周期

在React中，组件的生命周期被分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有特定的生命周期方法，这些方法允许开发者在组件的不同阶段执行特定的代码。

1.1挂载阶段

在组件首次被创建并添加到DOM中时，会触发挂载阶段的生命周期方法。主要的方法有：

constructor():构造函数，初始化组件的state和绑定事件处理函数。

getDerivedStateFromProps():在组件实例被创建和更新时被调用，用来更新state，决定是否需要重新渲染。

render():渲染组件到DOM，必须返回一个React元素。

componentDidMount():组件被挂载到DOM后立即调用，常用于执行数据获取、设置定时器等操作。

1.1.1代码示例

classExampleComponentextendsReact.Component{

constructor(props){

super(props);

this.state={

count:0

};

}

componentDidMount(){

//组件挂载后，获取数据

fetch(/data)

.then(response=response.json())

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

}

render(){

return(

div

pCount:{this.state.count}/p

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

Increment

/button

/div

);

}

}

1.2更新阶段

当组件的props或state发生变化时，会触发更新阶段的生命周期方法。主要的方法有：

shouldComponentUpdate():决定组件是否需要重新渲染，返回一个布尔值。

render():重新渲染组件到DOM。

getDerivedStateFromProps():在组件实例被创建和更新时被调用，用来更新state。

componentDidUpdate():组件更新后立即调用，可以用于执行副作用，如数据获取或DOM操作。

1.2.1代码示例

classExampleComponentextendsReact.Component{

constructor(props){

super(props);

this.state={

data:[]

};

}

shouldComponentUpdate(nextProps,nextState){

//如果data发生变化，才重新渲染

return!shallowEqual(this.state.data,nextState.data);

}

componentDidUpdate(prevProps,prevState){

//如果props中的id发生变化，重新获取数据

if(ps.id!==prevProps.id){

this.fetchData();

}

}

fetchData(){

fetch(`/data/${ps.id}`)

.then(response=response.json())

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

}

render(){

return(

div

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

pkey={item.id}{}/p

))}

/div

);

}

}

1.3卸载阶段

当组件从DOM中移除时，会触发卸载阶段的生命周期方法。主要的方法有：

componentWillUnmount():组件将要卸载时调用，用于清理资源，如取消网络请求、清除定时器等。

1.3.1代码示例

classExampleComponentextendsReact.Component{