开课吧全栈架构师期完结react预习组件瑞客.pdfVIP

组件

组件

课堂⽬标

资源

起步

组件

class组件

function组件

课堂⽬标

1.掌握组件使⽤

资源

1.组件Props

起步

组件

组件，从概念上类似于组件，从概念上类似于JavaScriptJavaScript函数。它接受任意的⼊参（即函数。它接受任意的⼊参（即“props”），并返回⽤于描述⻚⾯展示

内容的React元素。

组件有两种形式：class组件和function组件。

function组件。

class组件

class组件通常拥有状态和⽣命周期，继承于Component，实现render⽅法。⽤class组件创建⼀个

Clock：

importReact,{Component}fromreact;

exportdefaultclassClassComponentextendsReact.Component{

constructor(props){

super(props);

//使⽤state属性状态，在构造函数中初始化状态

this.state{date:newDate()};

}

componentDidMount(){

//组件挂载启动定时器每秒更新状态

this.timerIDsetInterval(()={

//使⽤setState⽅法更新状态

this.setState({

date:newDate()

});

},1000);

}

componentWillUnmount(){

//组件卸载前停⽌定时器

clearInterval(this.timerID);

}

componentDidUpdate(){

console.log(componentDidUpdate);

}

render(){

returndiv{this.state.date.toLocaleTimeString()}/div;

toLocaleTimeString

}

}

function组件

函数组件通常⽆状态，仅关注内容展示关注内容展示，返回渲染结果即可。，返回渲染结果即可。

hooks，函数组件也能够拥有状态。

从React16.8开始引⼊了hooks，函数组件也能够拥有状态。

Clock：

⽤function组件创建⼀个Clock：

importReact,{,{useStateuseState,,useEffectuseEffet}}fromfromreactreact;

FunctionComponent(props){

exportfunctionFunctionComponentprops){

const[date,setDate]useState(newDate());

setDate]=useState(new

useEffect(()={//副作⽤

副作⽤

consttimersetInterval(()={

setInterval(()

setDate(newDate());

},1000);

return()=clearInterval(timer);//组件卸载的时候执⾏

},[]);

return(

div

h3FunctionComponent/h3

p{date.toLocaleTimeString()}/p