React笔记——核心概念：4.组件&Props

1、组件

组件，从概念上类似于 JavaScript 函数。
它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
组件名称必须以大写字母开头。

2、函数组件与`class`组件

函数组件
- 接收带有数据的“props”（代表属性）对象并返回一个React元素
- 本质上就是Javascript函数
  
  JavaScript
  
  function Welcome (props) { return <h1>Hello, { props.name }</h1> }
  
  1
  2
  3
  
  function Welcome (props) {
  return <h1>Hello, { props.name }</h1>
  }
ES6的class定义组件

JavaScript

// 等效上面函数组件 class Welcome extends React.Component{ render () { return <h1>Hello, { this.props.name }</h1> } }

1
2
3
4
5
6

// 等效上面函数组件
class Welcome extends React.Component{
  render () {
    return <h1>Hello, {  this.props.name }</h1>
  }
}

3、渲染组件

React元素可以是用户自定义的组件
- 当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。
  
  JavaScript
  
  const element = <Welcome name="Sara" />
  
  1
  
  const element = <Welcome name="Sara" />

示例分析：

// 定义组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

// 调用组件
const element = <Welcome name="Sara" />
    
// 渲染组件
ReactDOM.render(
  element,
  document.getElementById('root')
)

// 定义组件

function Welcome(props) {

return <h1>Hello, {props.name}</h1>

}

// 调用组件

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

// 渲染组件

ReactDOM.render(

element,

document.getElementById('root')

)

1.我们调用 ReactDOM.render() 函数，并传入 <Welcome name="Sara" /> 作为参数。
2.React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
3.Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
4.act DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

4、组件组合

组件可以在其输出中引用其他组件。

function App () {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root1')
)

function App () {

return (

<div>

</div>

)

}

ReactDOM.render(

<App />,

document.getElementById('root1')

)

通常来说，每个新的 React 应用程序的顶层组件都是 App 组件。

5、提取组件

初始组件

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

function Comment (props) {

return (

<img className="Avatar"

src={ props.author.avatarUrl }

alt={ props.author.name }

{ props.author.name }

</div>

{ props.text }

</div>

{ formatDate(props.date) }

</div>

)

}

提取头像

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

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

function Avatar (props) {

return (

<img className="Avatar"

src={props.user.avatarUrl}

alt={props.user.name}

)

}

function Comment (props) {

return (

{ props.author.name }

</div>

{ props.text }

</div>

{ formatDate(props.date) }

</div>

)

}

提取UserInfo组件

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="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>
  )
}

function Avatar (props) {

return (

<img className="Avatar"

src={ props.user.avatarUrl }

alt={ props.user.name }

)

}

function UserInfo (props) {

return (

{ props.user.name }

</div>

)

}

function Comment (props) {

return (

{ props.text }

</div>

{ formatDate(props.date) }

</div>

)

}

6、`Props`的只读性

组件不能修改自身的 props
纯函数
- 函数不会尝试更改入参
- 多次调用下相同的入参始终返回相同的结果
  
  JavaScript
  
  function sum (a, b) { return a + b }
  
  1
  2
  3
  
  function sum (a, b) {
  return a + b
  }
非纯函数
- 更改了自己的入参
  
  JavaScript
  
  function withdraw (account, amount) { account.total -= amount }
  
  1
  2
  3
  
  function withdraw (account, amount) {
  account.total -= amount
  }
严格的规则
- 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

1、组件

2、函数组件与class组件

3、渲染组件

4、组件组合

5、提取组件

6、Props的只读性

2、函数组件与`class`组件

6、`Props`的只读性