react随记3 组件&Props

组件& Props

组件可以将UI上的内容分成一个个的独立的部分，这些组件可复用。
组件从概念上来看很像函数，接受任意的输入值(称之为props)，并返回一个React元素。
组件分为两类，一类是函数组件，一类是类组件。分别如下：

• 函数组件：函数组件就是用JavaScript的函数，但是函数名首字母必须是大写。

function Welcome(props) {
  return <h1>hello world!</h1>
}
ReactDOM.render(
  <Welcome />, document.getElementById('root')
);

可以看到渲染结果:

image.png

如果把函数组件名称Welcome改成小写字母开头welcome，则没有进行渲染：

image.png

• 类组件：可以使用ES6的class来定义组件：

class Welcome extends React.Component {
  render() {
    return <h1>hello world!</h1>  ;
  }
}
ReactDOM.render(
  <Welcome />, document.getElementById('root')
);

使用类组件的命名规则同函数组件一样。

组件渲染

React元素不仅可以使浏览器DOM标签，也可以是用户自定义的组件，当React遇到元素是用户自定义组件时，会把JSX属性作为一个对象传递给该组件，这个对象被叫做props。也就是你需要给这个组件传递参数的时候，就会用到这个对象。

function Welcome(props) {
  return <h1>hello ,{props.name}!</h1>
}
const element = <Welcome name="jianshu" />
ReactDOM.render(
  element, document.getElementById("root")
);

<Welcome>可以认为是同<h1>等价的标签，可以对其进行多个属性的定义，如上代码，就是定义了name属性，并赋值为"jianshu"，那么属性name和属性值jianshu都传递给了对象props，可以认为props就是一个对象，也有了name属性及其值。当然，作为对象，那就可以有多个属性，都可以进行声明和传递，如下图:

image.png

如上文所述：
组件名称必须以大写字母开头。 例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入它。

组件组合

组件可以在他的输出中引用其他组件，这就可以让我们使用同一个组件抽象出任意层次的细节。例如如下代码，在App组件，用来多次渲染Welcome组件:

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

function App() {
  return (
    <div>
       <Welcome name="jianshu" />
       <Welcome name="zhihu" />
       <Welcome name="weibo" />   
     </div>
  );
}

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

组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因。

Props的只读性

不管是使用函数组件还是类组件，在组件内部是不能修改自己的props的。也就是外部传入给props对象的属性，是只读的。
来看下如下的sum函数：

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

类似与这种的函数成为纯函数，函数没有改变自己的输入值，只要传入的值是相同的，返回的结果永远相同。
与之对应的是非纯函数，函数会改变自己的输入值：

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

React有严格的规定：
所有的React组件必须向春函数那样使用它们的props。