React文档：https://www.reactjscn.com/docs/components-and-props.html

慢慢学习：对照教程文档，逐句猜解，截图

React官网：https://reactjs.org
React中文网站：https://www.reactjscn.com
Github地址：https://github.com/facebook/react
React 技术栈系列教程：http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html

组件 & Props

组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

逐句猜解

独立的：彼此分离
可复用：重复使用

组件像个函数：有输入输出

函数定义/类定义组件

组件渲染

组合组件

提取组件

在 CodePen 上试试

Props的只读性

React 记录(4)的更多相关文章

  1. React 记录(1)

    作为一个前端工程师,前端框架是必须会的,所以开始学习React. 学习的方法是:先实践,后图文记录. React官网:https://reactjs.org React中文网站:https://www ...

  2. React 记录(7)

    React文档:https://www.reactjscn.com/docs/handling-events.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reac ...

  3. React 记录(6)

    React文档:https://www.reactjscn.com/docs/react-component.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reac ...

  4. React 记录(5)

    React文档:https://www.reactjscn.com/docs/state-and-lifecycle.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https:// ...

  5. React 记录(3)

    React文档:https://www.reactjscn.com/docs/hello-world.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reactjs. ...

  6. React 记录(2)

    入门教程:https://www.reactjscn.com/tutorial/tutorial.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reactjs.or ...

  7. react 记录：运行npm run eject命令暴露配置文件都报这个错误

    问题: react 使用create-react-app命令创建一个项目,运行npm run eject命令暴露配置文件都报这个错误 原因:主要是脚手架添加 .gitgnore文件,但是却没有本地仓库 ...

  8. react 记录：React Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

    前言: react-router-dom 4.4.2 在页面中直接使用 import { Link } from 'react-router-dom' //使用 <Link to={{ path ...

  9. Effect Hook

    1 数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用. 2 可以把 useEffect Hook 看做 componentDidMount,componentDidUpdat ...

随机推荐

  1. LeetCode算法题-Binary Number with Alternating Bits（Java实现）

    这是悦乐书的第292次更新,第310篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第160题(顺位题号是693).给定正整数,检查它是否具有交替位:即它的二进制数的任意两 ...

  2. HTML，CSS---问题记录

    1,,登录框input和标签垂直方向对不齐,咋解决? 给input框外套一层span标签,给span标签设置宽高,让它和左边或右边的标签对齐. 不要直接给input设置宽高,这样是对不齐的 2,套没有 ...

  3. python 结巴分词学习

    结巴分词(自然语言处理之中文分词器) jieba分词算法使用了基于前缀词典实现高效的词图扫描,生成句子中汉字所有可能生成词情况所构成的有向无环图(DAG), 再采用了动态规划查找最大概率路径,找出基于 ...

  4. 文本分类实战（十）—— BERT 预训练模型

    1 大纲概述 文本分类这个系列将会有十篇左右,包括基于word2vec预训练的文本分类,与及基于最新的预训练模型(ELMo,BERT等)的文本分类.总共有以下系列: word2vec预训练词向量 te ...

  5. android 获取通话记录

    在manifest添加以下权限<uses-permission android:name="android.permission.READ_CALL_LOG" />&l ...

  6. future builder

    import 'package:flutter/material.dart';import 'dart:convert';import 'package:http/http.dart' as http ...

  7. ELK的安装

    首先得安装好Elasticsearch.Kibana和Logstash(这里全部使用rpm安装的是6.4.2版本,而且都是单机安装,暂时没有考虑分布式安装.) 服务器内存要求至少为4G,下图为运行起来 ...

  8. sigsuspend()阻塞：异步信号SIGIO为什么会被截胡？

    关键词:fcntl.fasync.signal.sigsuspend.pthread_sigmask.trace events. 此文主要是解决问题过程中的记录,内容有较多冗余.但也反映解决问题中用到 ...

  9. 洛谷P4431

    题意翻译 题目大意: 给定一个n∗m的矩阵,每次你可以选择前进一格或转弯(90度),求在不出这个矩阵的情况下遍历全部格点所需最少转弯次数.有多组数据 输入格式: 第一行一个整数k,表示数据组数 以下k ...

  10. Windows技巧

    1 修改域名 像Linux的/etc/hosts一样,windows也有一个类似的hosts文件, C:/WINDOWS/system32/drivers/etc/hosts 添加如下域名与IP的映射 ...