React 组件化、类复用

古城微笑少年丶 2022-12-27 04:44 95阅读 0赞

类实现 ：React 主要实现方式

/\*\*  
       \* 如果一个函数或类作为一个组件去使用的话，那么名称必须首字母大写  
       \* 如果使用类实现组件，那么需要继承一个父类：React.Component  
       \* 组件类必须实现一个render()的方法,是该组件的渲染  
       \* props：传入的参数必须是用对象下的一个属性props来接收

\* 但是有一个例外，就是 `this.props.children` 属性。它表示组件的所有子节点

\* `this.props.children` 的值有三种可能：如果当前组件没有子节点，它就是 `undefined` ;如果有一个子节点，数据类型是 `object` ；如果有多个子节点，数据类型就是 `array` 。

所以，处理 `this.props.children` 的时候要小心。

React 提供一个工具方法 [`React.Children`][React.Children] 来处理 `this.props.children` 。我们可以用 `React.Children.map` 来遍历子节点，

而不用担心 `this.props.children` 的数据类型是 `undefined` 还是 `object`。

\*/

<script src="js/react.development.js"></script>
        <script src="js/react-dom.development.js"></script>
        <script src="js/babel.min.js"></script>
      </head>
      <body>
        <div id="app"></div>
        <script type="text/babel">
          var users = ["苹果", "梨子", "香蕉"];
          var users2 = ["张三", "李四", "王五"];
    
          class List extends React.Component {
            /* Code */
            render() {
              return this.props.dataList.map((item, index) => {
                return <li key={index}>{item}</li>;
              });
            }
          }
        
         class NotesList extends React.Component{
          render(){
            return (
              <ol>{
                React.Children.map(this.props.children,(child,index)=> {
                      return <li key={index}>{child}</li>;
                    })
              }</ol>
            )
          }
        }
    
          ReactDOM.render(
            <div>
              <ul>
                <List dataList={users} />
              </ul>
    
              <ul>
                <List dataList={users2} />
              </ul>
    
              <NotesList>
                  <span>hello</span>
                  <span>world</span>
             </NotesList>
            </div>,
            document.getElementById("app")
          );
        </script>

原生Js 实现

/\*\*  
    \* 函数复用  
    \* 组件：拥有独立功能的一个模块  
     \* React还提供组件的另外一种使用的方式：标签化  
     \* 标签化：传参，通过标签属性传入的  
\*/

<script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    </head>
    <body>
    
        <div id="app"></div>
    
        <script type="text/babel">
            var users = ['苹果','梨子','葡萄'];
            var users2 = ['张三','李四','王五'];
    
            function List(props) {
                /**
                 * props:接受来自标签上的所有属性
                 *     props = {
                 *         data: users,
                 *         a: '1'
                 *     }
                 */
                return props.data.map( ( item, index ) => {
                    return <li key={index}>{item}</li>;
                } )
            }
    
            ReactDOM.render(
                <div>
                    <ul>
                        {/*List(users)*/} {/* 直接调用方法 */}
                        <List data={users} a="1" />
                    </ul>
    
                    <ul>
                        {/*List(users2)*/}
                        <List data={users2} />
                    </ul>
                </div>,
                document.getElementById('app')
            );
        </script>

[React.Children]: https://facebook.github.io/react/docs/top-level-api.html#react.children

发表评论取消回复

表情：

评论列表（有 0 条评论，95人围观）

还没有评论，来说两句吧...

相关阅读

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

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

骑猪看日落/ 2024年05月01日 16:22/ 0 赞/ 28 阅读

相关 React组件逻辑复用的那些事儿

基本每个开发者都需要考虑逻辑复用的问题，否则你的项目中将充斥着大量的重复代码。那么 `React` 是怎么复用组件逻辑的呢？本文将一一介绍 `React` 复用组件逻辑的几种方

约定不等于承诺〃/ 2023年02月10日 05:15/ 0 赞/ 124 阅读

相关 react组件通讯

React 的组件可以定义为 class 或函数的形式函数组件 <script type="text/babel"> function HelloM

Dear 丶/ 2023年01月13日 01:51/ 0 赞/ 213 阅读

相关 React 组件化、类复用

类实现：React 主要实现方式 /\\ \ 如果一个函数或类作为一个组件去使用的话，那么名称必须首字母大写 \ 如果使用类实现组件，

古城微笑少年丶/ 2022年12月27日 04:44/ 0 赞/ 96 阅读

相关 react组件通信

一、状态机setState是一个异步操作 setState用来修改state中的初始状态，但是它异步操作，不能在setState之后马上获取到最新的数据。可以使用setS

末蓝、/ 2022年12月05日 10:20/ 0 赞/ 173 阅读

相关 javascript组件化

作为一名前端工程师，写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具，但是在一代代大牛的前仆后继的努力下，渐渐的也摸索了一套组件的编写方式。下面我们来谈

落日映苍穹つ/ 2022年08月04日 14:56/ 0 赞/ 158 阅读

相关 React组件API

虚拟DOM React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到

悠悠/ 2022年06月16日 13:09/ 0 赞/ 146 阅读

相关前端开发之React组件化知识

\前端开发之React组件化知识最近公司开发一个项目用的React自己学习了一下，顺便就整理出来。基于组件的开发是React三大理念之一。通过组件的组合，去构建更复杂的

╰半夏微凉°/ 2022年06月16日 03:42/ 0 赞/ 192 阅读

相关 react篇章-React 组件-复合组件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 R

叁歲伎倆/ 2021年12月24日 15:33/ 0 赞/ 296 阅读

相关 React组件化练习

资源 [Context参考][Context] [HOC参考][HOC] [Hooks参考][Hooks] 组件跨层级通信 - Context

心已赠人/ 2021年09月24日 10:18/ 0 赞/ 269 阅读