React入门教程(3)React的组件及组件的生命周期

React组件

组件可以将UI切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。

组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。

函数定义/类定义组件

定义一个组件最简单的方式是使用JavaScript函数:

function Welcome(props) {
  return 

Hello, {props.name}

; }

该函数是一个有效的React组件,它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件,是因为从字面上来看,它就是一个JavaScript函数。

你也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
  render() {
    return 

Hello, {this.props.name}

; } }

上面两个组件在React中是相同的。

组件渲染

在前面,我们遇到的React元素都只是DOM标签:

const element = 
;

然而,React元素也可以是用户自定义的组件:

const element = ;

当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。

例如,这段代码会在页面上渲染出"Hello,Sara":

function Welcome(props) {
  return 

Hello, {props.name}

; } // ... class App extends Component { render() { return (
); } } // ...

我们来回顾一下在这个例子中发生了什么:

  1. 我们对元素调用了ReactDOM.render()方法。
  2. React将{name: 'Sara'}作为props传入并调用Welcome组件。
  3. Welcome组件将

    Hello, Sara

    元素作为结果返回。
  4. 将DOM更新为

    Hello, Sara

警告:

组件名称必须以大写字母开头。

例如,

表示一个DOM标签,但 表示一个组件,并且在使用该组件时你必须定义或引入它。

组合组件

组件可以在它的输出中引用其它组件,这就可以让我们用同一组件来抽象出任意层次的细节。在React应用中,按钮、表单、对话框、整个屏幕的内容等,这些通常都被表示为组件。

例如,我们可以创建一个App组件,用来多次渲染Welcome组件:

function Welcome(props) {
  return 

Hello, {props.name}

; } function App() { return (
); }

通常,一个新的React应用程序的顶部是一个App组件。但是,如果要将React集成到现有应用程序中,则可以从下而上使用像Button这样的小组件作为开始,并逐渐运用到视图层的顶部。

警告:

组件的返回值只能有一个根元素。这也是我们要用一个

来包裹所有元素的原因。

提取组件

你可以将组件切分为更小的组件,这没什么好担心的。

例如,来看看这个Comment组件:

function Comment(props) {
  return (
    
{props.author.name}
{props.author.name}
{props.text}
{formatDate(props.date)}
); }

这个组件接收author(对象)、text(字符串)、以及date(Date对象)作为props,用来描述一个社交媒体网站上的评论。

这个组件由于嵌套,变得难以被修改,可复用的部分也难以被复用。所以让我们从这个组件中提取出一些小组件。

首先,我们来提取Avatar组件:

function Avatar(props) {
  return (
    {props.user.name}
  );
}

Avatar作为Comment的内部组件,不需要知道是否被渲染。因此我们将author改为一个更通用的名字user

我们建议从组件自身的角度来命名props,而不是根据使用组件的上下文命名。

现在我们可以对Comment组件做一些小小的调整:

function Comment(props) {
  return (
    
{props.author.name}
{props.text}
{formatDate(props.date)}
); }

提取组件一开始看起来像是一项单调乏味的工作,但是在大型应用中,构建可复用的组件完全是值得的。当你的UI中有一部分重复使用了好几次(比如,ButtonPanelAvatar),或者其自身就足够复杂(比如,AppFeedStoryComment),类似这些都是抽象成一个可复用组件的绝佳选择,这也是一个比较好的做法。

Props的只读性

无论是使用函数或是类来声明一个组件,它决不能修改它自己的props。来看这个sum函数:

function sum(a, b) {
  return a + b;
}

类似于上面的这种函数称为“纯函数”,它没有改变它自己的输入值,当传入的值相同时,总是会返回相同的结果。

与之相对的是非纯函数,它会改变它自身的输入值:

function withdraw(account, amount) {
  account.total -= amount;
}

React是非常灵活的,但它也有一个严格的规则:

所有的React组件必须像纯函数那样使用它们的props。

当然,应用的界面是随时间动态变化的,后面会介绍一种称为“state”的新概念,State可以在不违反上述规则的情况下,根据用户操作、网络响应、或者其他状态变化,使组件动态的响应并改变组件的输出。

组件的生命周期

React组件的生命周期图解

React 生命周期图解

组件会随着组件的props和state改变而发生变化,它的DOM也会有相应的变化。一个组件就是一个状态机:对于特定的输入,它总会返回一致的输出。

React组件提供了生命周期的钩子函数去响应组件不同时刻的状态,组件的生命周期如下:

  • 实例化阶段
  • 存在期阶段
  • 销毁期阶段

实例化阶段

首次调用组件时,实例化阶段有以下方法会被调用(注意顺序,从上到下先后执行):

getDefaultProps

这个方法是用来设置组件默认的props,组件生命周期只会调用一次。但是只适合React.createClass直接创建的组件,使用ES6/ES7创建的这个方法不可使用,ES6/ES7可以使用下面方式:

//es7
class Component {
  static defaultProps = {}
}

getInitialState

设置state初始值,在这个方法中你已经可以访问到this.props。getDefaultProps只适合React.createClass使用。使用ES6初始化state方法如下:

class Component extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      render: true,
    }
  }
}
// 或者这样, es6 stage3

class Component extends React.Component{
  state = {
    render: true
  }
  render(){return false;}
}

componentWillMount

此方法会在组件首次渲染之前调用,这个是在render方法调用前可修改state的最后一次机会。这个方法很少用到。

render

这个方法以后大家都应该会很熟悉,JSX通过这里,解析成对应的虚拟DOM,渲染成最终效果。格式大致如下:

class Component extends React.Component{
  render(){
    return (
       
) } }

componentDidMount

这个方法在首次真实的DOM渲染后调用(仅此一次)当我们需要访问真实的DOM时,这个方法就经常用到。如何访问真实的DOM这里就不想说了。当我们需要请求外部接口数据,一般都在这里处理。

存在期

实例化后,当props或者state发生变化时,下面方法依次被调用:

componentWillReceiveProps

没当我们通过父组件更新子组件props时(这个也是唯一途径),这个方法就会被调用。

componentWillReceiveProps(nextProps){}

shouldComponentUpdate

字面意思,是否应该更新组件,默认返回true。当返回false时,后期函数就不会调用,组件不会在次渲染。

shouldComponentUpdate(nextProps,nextState){}

componentWillUpdate

字面意思组件将会更新,props和state改变后必调用。

render

跟实例化时的render一样,不多说

componentDidUpdate

这个方法在更新真实的DOM成功后调用,当我们需要访问真实的DOM时,这个方法就也经常用到。

销毁期

销毁阶段,只有一个函数被调用:

componentWillUnmount

没当组件使用完成,这个组件就必须从DOM中销毁,此时该方法就会被调用。当我们在组件中使用了setInterval,那我们就需要在这个方法中调用clearTimeout。

参考:React组件生命周期

参考

  1. 官网文档
  2. 老马React视频地址: https://ke.qq.com/course/379234?tuin=1eb4a0a4
  3. AICODER官网地址:https://www.aicoder.com/

你可能感兴趣的:(React入门教程(3)React的组件及组件的生命周期)