Day7 认识Components与 Props

Components基本定义

Components是react组成的最基本元素，每一个Compontant负责一个UI控制，若在其他页面有重复用到该元件的话，只需要引用该元件即可使用其功能。

Function Component 与 Class Component

撰写Javascript的function便可简单建立一个componment，下面用function及ES6 class的写法当作范例:

function Welcome(props){
    return <h1>Hello,{props.name}</h1>;
}
const element=<Welcome name="小羽" />

// ES6 class的写法
class Welcome2 extends React.Component{
render(){
    return <h1>Hello,{this.props.namne}</h1>;
}
}

// 将Resct元素渲染到HTML架构
ReactDOM.render(element,document.getElementById('app'))

当React看到由使用者定义component时，它将 JSX 属性(范例的name)和children作为单一物件传递给该 component。该物件在react称为「props」。

需注意的是，Components定义的function开头英文必须是大写，<Welcome/>会被视为Component，若改成小写的<welcome/>的话，则会被当作HTML的标签。

复合式Components

Components里面可以包覆多个component，将整个画面的元素都透过Component渲染到浏览器上。

    // function component
    function Welcome(props){
        return <h1>Hello,{props.name}</h1>;
    }
    const element=<Welcome name="小羽" />
    // name为
    
    // ES6 class的写法
    class Welcome2 extends React.Component{
    render(){
        return <div>
            <Welcome name="小羽" />
            <Welcome name="小资" />
            <Welcome name="小雨" />
            </div>;
    }
    }
    
    // 将Resct元素渲染到HTML架构，注意和上面定义的变数element不同是，ReactDOM.render()第一个变数需放入react元素，以标签的形式包覆
    ReactDOM.render(<Welcome2 />,document.getElementById('app'))

抽离式Components

将Component拆成更小的Component，主要目的为将其中一些逻辑判断从中抽出，若其他页面有用到的话便可直接引用，下面为官网的范例:

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>
  );
}

从中可以观察到该component为作者照片、作者姓名、发布内容、发布日期组成，现在逐一把作者照片及姓名逐一拆出。

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

props的命名方式建议从建立该Component的UI逻辑去考虑，方便未来再其他页面反覆使用时好理解其用途；范例中便将author改成user。
简化後:

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>
  );
}

抽离User Info

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

最终简化後结果:

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>
  );
}

可以看到程序码变的简化後，易读性增加的同时，拆出来的使用者资讯(<UserInfo/>)Component还可在其他页面反覆使用，让程序更好管理、维护。