< 关於 React: 开始打地基| function、class function >

09-05-2021

React Component 是基於元件化的思考模式

本章内容

• Component特性
• Component注意事项
• Function Component & Class Componet 是什麽样的存在？
  • Function Component
    • 将共用组件放在子组件内显示
    • 将一个Component使用Render出来
  • Class Component
• 拆解Component，让大家一起分工合作吧！
  • 组合 Component
  • 抽离 Component
• Props 特性
• 使用Props 传递
  • 使用props时的判断情境

Component 特性

1. 基於元件化的思考模式
2. 宣告Component的方式，使用JSX的方式，可以容易知道这个component在做什麽
3. 不如以往jQuery 进行DOM的更改，在效能上是个大伤。而React中有自己的Virtual DOM ，在App与DOＭ沟通时会更有效率的进行更新。
4. Component PropType防呆机制，若没有传入值会返回props预设值（Default Prop Values）
5. Component也是有生命的，有状态的。透过state(使用useState修改)以及props(从父元素中传入资料)，再者透过生命周期控制component对於元件的处理。

（image via maketea）

Component注意事项

• Component 的字首需要是==大写字母==
• 小写字母会被React 视为原始的DOM标签。
• <div> 视为HTML的<div>标签
• <Doggy / > 则视为一个component，且需要在作用域中使用到<Doggy / >

说明：

component就像是一个个拆解开来的function，他可以接受任意的参数(props)传递，并且将回传React element所写的画面。同时component 可以将UI 拆解成独立且可以重复利用的程序码，我们即可以将每个component 独立看待。

Function Component & Class Componet 是什麽样的存在？

Function Component:

本身就是JavaScript 的funtion，stateless component（没有状态的component）没有内部状态、没有实作物件、没有ref、没有生命周期函数。
若非需要控制生命周期的话，建议使用stateless component，可以获得较好的效能

说明：

我们简单的定义一个React component，因为在这里面他只接受一个props(属性)物件，并且回传一个React element。

范例：
function Doggy(props) {
  return <h1>我是可爱的, {props.name}</h1>;
}

将一个Component使用Render出来

重新整理一下思绪，我们昨天在element 的章节里提到的～

const element = <p>这是第一个显示的文字</p>;

同时React element 也是可以自己定义成component

const element = <Doggy name="狗狗" />;

但是，<Doggy name="Sara" /> 该怎麽显示呢？关於更深入的传递方式，在制作一集专门介绍的篇章记录一下。

说明：

当React 看到我们自定义component的element时，就会将JSX属性以及childern(内容)
当作single object 传递给该一个component，而这其中的object 就是props

function Doggy(props) {
  return <h1>我是可爱的, {props.name}</h1>;
}

const element = <Doggy name="狗狗" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

解释：

我们在const element = <Doggy name="狗狗" /> 使用了ReactDOM render() 呼叫他
并在<Doggy name="狗狗" /> 以 {name: '狗狗'} 当作 props传入Doggy的component 并且return呼叫他。

当 Doggy component 回传了 <h1>我是可爱的, {props.name}</h1> 返回这个element

再来 ReactDOM 就会将DOM更新成我是可爱的,狗狗

将表单内容回圈渲染出来的情境

const people = ['Rowe', 'Prevost', 'Gare'];
const peopleLis = people.map(person)=>
  // expression goes here:
  <li>{person}</li>
);
// ReactDOM.render goes here:
ReactDOM.render(<ul>{peopleLis}</ul>,document.getElementById('app'))

解释：

使用.map 回圈
设定要显示的person变数内容
用peopleLis 作为component
最後DOM出来在ul里面peopleLis回圈出来的li内容

• 同上篇，在map中加入key值，回圈出来加入index顺序。

const peopleLis = people.map((person,i) =>
  // expression goes here:
  <li key={'person_' + i} >{person}</li>
);

Class Component:

ES6的定义方式

可以进行复杂的操作和元件生命周期的控制，但是相对於 stateless components 耗费资源

class Doggy extends React.Component {
  render() {
    return <h1>我是可爱的, {this.props.name}</h1>;
  }
}

将共用组件放在子组件内显示

• 若组建没有地址可以填，加上.js也是可以被读取到的

import React from 'react';
import ReactDOM from 'react-dom';
import {NavBar} from './NavBar.js';
／／用花括号表示引入的component名称 

class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <NavBar />
        <h1>All About Me!</h1>
        <p>I like movies and blah blah blah blah blah</p>
        <img src="https://content.codecademy.com/courses/React/react_photo-monkeyselfie.jpg" />
      </div>
    );
  }
}

在component前面加上export 就可以将NavBar引入进来

//范例

import React from 'react';
export class NavBar extends React.Component {
  render() {
    const pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
    const navLinks = pages.map(page => {
      return (
        <a href={'/' + page}>
          {page}
        </a>
      )
    });
    return <nav>{navLinks}</nav>;
  }
}

<上篇>