React笔记4（组件&props）

组件可以将ui切分成一些独立的，可复用的部件。
组件从概念上来说是函数，它可以接收任意的输入值props，并返回一个需要在页面上展示的React元素。

1.组件(函数定义、类定义)

定义的组件名字开头一定要大写，否则不识别为组件

//函数定义
function Welcome(props){
    return <h1>hello {props.name}</h1>；
}

//ES6类定义组件
class Welcome extends React.Component{
    render(){
        return <h1>hello，{this.props.name}</h1>
    }
}

以上的2个组件在React中是相同的。
但是有他们的优劣不同。

2.组件渲染

React元素可以是DOM标签，也可以是自定义组件。
如果React遇到的元素是用户自定义的组件，他会将jsx属性作为单个对象传递给该组件。这个对象称为props，比如这里的props的key是name，值是salar

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

渲染步骤

①首页使用es6 class定义一个Welcome的组件
②把组件复制给 element，并且用它调用了ReactDOM方法
③React将props{name:"kolento"}传入并且调用组件
④组建中获得props，把name显示在组件节点中并且返回
⑤ReactDOM最后将DOM进行更新完成

警告:

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

3.组合组件

组件可以在他的输出中引用其他组件，同一个组件可以抽象出任意层次的细节，在React应用中，表单，按钮，整个屏幕的内容，都可以被表示为组件。

//定义一个Welcome组件
function Welcome(){
    return (<h1>hello,{props.name}</h1>)
}
//定义一个App组件,并且嵌套Welcome组件
function App(){
    return (
        <div>
                <Welcome name="aaaa" />
                <Welcome name="bbbb" />
                <Welcome name="cccc" />
        </div>
    )
}
//挂载相应的组件和内容
ReactDOM.render(
    <App />,document.getElementById('root')
)
// hello aaaa
// hello bbbb
// hello cccc

警告:

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

4.提取组件

原始组件demo，包含用户头像、姓名、评论和时间4个部分

//comment代表获取的数据
const comment = {
    date: new Date().toLocaleTimeString(),
    text: 'I hope you enjoy learning React!',
    author: {
      name: 'Hello Kitty',
      avatarUrl: 'http://placekitten.com/g/64/64'
    }
  };
//此处定义一个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">{props.date}</div>
        </div>
    )
}
//挂载ReactDOM上，并且传入comment数据进入组件显示在页面上
ReactDOM.render(
    <Comment date={comment.date} text={comment.text} author={comment.author}/>,
    document.getElementById('root')
)

优化组件，拆分组件利于复用

在大型应用中，组件的复用与提取可以提高工作效率

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

// 提取useinfo组件
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">{props.date}</div>
        </div>
    )
}

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

5.props的只读性

无论使用函数或者类声明一个组件，他都不能修改他们的props属性和值
所有的React必须像纯函数那样使用它们的props
纯函数：
不能通过函数中的运算修改他们的输入值