组件&props学习

2017-09-25 本文已影响32人张延伟

组件可以将UI切分成一些独立的、可复用的部分，这样我们就只需专注于构建每一个单独的部分。
组件就像是函数，他可以接收任意的输入值("props")，并返回一个需要在页面上展示的React元素。

定义组件

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

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

这函数是一个有效的React组件，它接收一个单一的"props"对象并返回了一个React元素。这种当时叫做函数定义组件。
我们也可以使用ES6 class来定义一个组件：

class Welcome1 extends React.component {
  render(){
    return <h1>Hello,{this.props.name}</h1>;
  }
}

上面两个组件在React中是相同的。
我们先使用简洁的函数定义组件来学习本节的知识。

组件渲染

之前，我们将的元素渲染都是DOM标签，然而，React元素也可以是用户自定义的组件：

const element = <Welcome name="Zhang" />

当React遇到的元素是自定义的组件，它会将JSX属性作为一个对象传递给组件，这个对象称之为"props"。
下面这段代码将在页面渲染出"Hello, Zhang":

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

const element = <Welcome name="Zhang" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

过程：
1.我们对 <Welcome name='Zhang' />元素调用了ReactDom.render()方法。
2.React将{name:'Zhang'}作为props传入并调用Welcome组件。
3.Welcome组件将<h1>Hello, Zhang</h1>作为结果返回。
4.React DOM将DOM更新为<h1>Hello, Zhang</h1>渲染在页面上。
注意：
组件名称必须以大写字母开头。

组合组件

组件可以在它的输出中引用其他组件。在React应用中，按钮、表单、对话框、等等内容，都可以被表示为组件。
我们可以创建一个App组件，用来复用Welcome组件：

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

通常，一个新的React应用程序的顶部是一个App组件。如果要将React继承到现有的应用程序中，可以从下而上使用像Button 这样的小组件开始，逐渐运用到视图层的顶部。
注意：
组件的返回值只能有一个根元素。所以前面我们要用一个<div>来包裹所有的<Welcome />组件元素。

提取组件

image.png

我们来提取上图布局的组件：

用户信息
用户评论
时间戳

//一条评论的数据
const comment = {
  date: new Date(),
  text:'I hope you enjoy learning React!',
  author:{
    name:'Hello Kitty',
    avatarUrl:'http://placekitten.com/g/64/64'
  }
}

用户信息又可以拆分成头像和姓名：

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

//用户信息
function UserInfo(props) {
  return (
   <div className="userInfo">
      <Avatar user={props.user}/>
      <div className="name">{props.user.name}</div>
   </div>
  );
}

评论：

//评论
function CommentText(props){
  return <div className="text">{props.text}</div>;
}

时间戳：

//时间戳
function formatDate(date) {
  return date.toLocaleDateString();
}
function Time(props){
  return <div className="date">{formatDate(props.date)}</div>
}

集合组件：

//评论整个父组件
function Comment(props){
  return (
    <div className="comment-wrap">
      <UserInfo user={props.author}/>
      <CommentText text={props.text} />
      <Time date={props.date} />
    </div>
  )
}

使用组件：

//渲染
ReactDOM.render(
<Comment
  date={comment.date}
  text={comment.text}
  author={comment.author}
  />,
  document.getElementById('root')
);

拆分后整个结构很清晰。组件在取名时按照功能来，比较易读易懂。

Props的只读性

无论是使用函数或者类来声明一个组件，它决不能修改自己的props。
接下来我们将学习一种称之为"state"的东西，他可以在不违背上面规则的情况下，根据用户操作、网络响应或者其他变化，使组件动态的响应并改变组件的输出。