笔记七、React组件化开发练习

渲染组件

• 当用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

class App extends React.Component{
  render(){
    return (
      <div>正在学习{this.props.text}课程</div>
    )
  }
}

• 发生了什么

  • 调用 root.render() 函数，并传入 <App text="react"/> 作为参数。
  • React 调用 App 组件，并将 {text: 'react'} 作为 props 传入。
  • App 组件将 <div>正在学习react课程</div> 元素作为返回值。
  • React DOM 将 DOM 高效地更新为 <div>正在学习react课程</div>。

注意

自定义组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签
例如，<div /> 代表 HTML 的 div 标签，而 <App /> 则代表一个组件，并且需在作用域内使用 App。

•  嵌套组件

// 函数组件 简洁
// 函数名称首字母需要大写
// function App(props) {
//   return <>永1远{props.text}的1神</>
// }

// 类组件
// 引入核心库
import React from "react";

// 嵌套组件
class Children extends React.Component {
    render() {
        return <>正在学习的课程</>;
    }
}

// 所有 React 组件必须像纯函数一样保护它的 props 不被更改
class App extends React.Component {
    render() {
        return (
            <>
                <Children/>
                <div>学习 {this.props.text} 课程</div>
            </>
        )
    }
}

export default App

• 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改 

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

// props的修改
function withdraw(account, amount) {
  account.total += amount;
}