关于javascript:react-也就这么回事-05-组件-Props

什么是组件：用来实现部分性能的可复用代码片段

比方很多界面会用到“分页”性能，因而能够将它封装成独立的 组件

这样用到分页的界面只需引入该组件而不用从新写代码

1 定义组件

在 React 中有两种组件，一种是 函数组件 ，一种是 类组件

1.1 函数组件

定义组件最简略的形式就是编写 JavaScript 函数

对 React 来说，可能返回一个 React 元素的 函数 就叫组件

function MyComponent() {return <h2> 我是一个函数组件 </h2>;}

在线代码

1.2 class 组件

类组件的申明过程会比拟繁琐一些，须要应用 class、extends 关键字，来继承React.Component{}

render()函数会返回该类的实例要创立的元素。

class MyComponent extends React.Component {render() {return <h2> 我是一个 class 组件 </h2>;}
}

在线代码

无论是函数组件还是 class 组件，在 React 中是等效的，不过 class 组件有更多的个性

2 渲染组件

同一个组件在不同界面应用，可能会想要展现不同的内容

比方咱们自定义的组件蕴含了一个 h2 标签，如果咱们想要在两个不同的界面别离展现 函数 和class怎么办？

能够在应用组件时增加属性，react 会将增加的属性转换为一个对象传递给组件，这个对象称为 ”props”

函数组件和 class 组件能够别离通过“形参”和实例属性来应用这个对象

比方:

function MyComponent(props) {console.log(props)
    return <h2> 我是一个函数组件 </h2>;
}
ReactDOM.render(
    <MyComponent a="1" b="2" />,
    document.getElementById("root")
);

class MyComponent extends React.Component {render() {console.log(this.props);
        return <h2> 我是一个 class 组件 </h2>;
    }
}
ReactDOM.render(
    <MyComponent a="1" b="2" />,
    document.getElementById("root")
);

两者输入同样的对象：

在线代码

于是咱们能够传入不同的属性，来让组件出现不同的内容：

function MyComponent(props) {return <h2> 我是一个 {props.name} 组件 </h2>;
}

ReactDOM.render(
    <MyComponent name="自定义函数" />,
    document.getElementById("root")
);

在线代码

这个例子中产生了这些事：

1. 咱们调用 ReactDOM.render() 函数，并传入 <MyComponent name="自定义函数" /> 作为参数。
2. React 调用 MyComponent 组件，并将 {name: '自定义函数'} 作为 props 传入。
3. MyComponent 组件将 <h2> 我是一个自定义函数组件 </h2> 元素作为返回值。
4. React DOM 将 DOM 高效地更新为 <h2> 我是一个自定义函数组件 </h2>。

3 留神点

• 组件名称必须以大写字母结尾。

• 传入属性值为字符串和数字的区别：

  数字：<MyComponent a={1} />

  字符串：<MyComponent a="1" />

• 多个属性能够应用扩大运算符

  const obj = {name: 'React', age: 18}
  <MyComponent {...obj} /> 

  留神 {} 不能省略

在线代码

3 组合组件

组件能够在其输入中援用其余组件

例如，咱们能够创立一个能够屡次渲染 Welcome 组件的 App 组件：

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

这就能够让咱们用同一组件来构建不同档次的新组件

在线代码

4 提取组件

对于一个简单的组件，咱们应该尽量将其拆分为更小的组件，以进步其可维护性和可读性

例如，参考如下 Comment 组件：

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

该组件用于形容一个社交媒体网站上的评论性能，它接管 author（对象），text（字符串）以及 date（日期）作为 props。

该组件因为嵌套的关系，变得难以保护，且很难复用它的各个局部。因而，让咱们从中提取一些组件进去。

首先，咱们将提取 Avatar 组件：

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

Avatar 不需晓得它在 Comment 组件外部是如何渲染的。因而，咱们给它的 props 起了一个更通用的名字：user，而不是 author。

倡议从组件本身的角度命名 props，而不是依赖于调用组件的上下文命名。

当初能够在 Comment 中援用 Avatar 组件了：

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

接下来，咱们将提取 UserInfo 组件，该组件在用户名旁渲染 Avatar 组件：

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

进一步简化 Comment 组件：

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

5 Props 的只读性

对于 props，React 有一个严格的规定：

组件无论是应用函数申明还是通过 class 申明，都决不能批改本身的 props。

6 计时器

function tick() {
  const element = (<h2> 以后工夫：{new Date().toLocaleTimeString()}.</h2>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

这个例子中，每秒调用一次 tick 函数，页面会更新以后工夫

在线代码

将它封装为一个组件：

class Clock extends React.Component {render() {return <h2> 当初工夫：{new Date().toLocaleTimeString()}</h2>;
  }
}

function tick() {ReactDOM.render(<Clock />, document.getElementById("root"));
}

setInterval(tick, 1000);

咱们将工夫写死在了 JSX 中

在线代码

如果咱们想本人传入显示的内容：

class Clock extends React.Component {render() {
    const time = this.props.time;
    return <h2> 当初工夫：{time}</h2>;
  }
}

function tick() {
  ReactDOM.render(<Clock time={new Date().toLocaleTimeString()} />,
    document.getElementById("root")
  );
}

setInterval(tick, 1000);

这样咱们就能够管制显示的格局

在线代码

公众号【前端嘛】发问答疑