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

骑猪看日落 2024-05-01 16:22 137阅读 0赞

渲染组件

*  当用户自定义组件时，它会将 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;
    }