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. Extjs 改变grid行的背景颜色

    ## Ext grid 改变行背景色 Ext.util.CSS.createStyleSheet('.ts {background:#9a9a9bc2;}');//单独创建css样式 { xtype: ...

  2. #017 python实验课第五周

    总结写在最前面: 1.语法还是不会...(每周强制留的C语言一百题都没空写PS.团委诶....)都是现查现用(莫凡Python这个网站特别好用知识点一个视频就一分钟B站的播放器没广告,用啥学啥,还配有 ...

  3. vue SSR : 原理（一）

    前言: 由于vue 单页面对seo搜索引擎不支持,vue官网给了一个解决方案是ssr服务端渲染来解决seo这个问题,最近看了很多关于ssr的文章, 决定总结下: 参考博客:从0开始,搭建Vue2.0的 ...

  4. UVALive - 3211 - Now or later（图论——2-SAT）

    Problem   UVALive - 3211 - Now or later Time Limit: 9000 mSec Problem Description Input Output Sampl ...

  5. [LeetCode] 9. 回文数

    题目链接:https://leetcode-cn.com/problems/palindrome-number/ 题目描述: 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都 ...

  6. 使用Jasypt对SpringBoot配置文件加密(转)

    文章转自   https://www.jianshu.com/p/323ec96c46d2 引入jasypt <dependency> <groupId>com.github. ...

  7. 六招轻松搞定你的CentOS系统安全加固

    Redhat是目前企业中用的最多的一类Linux,而目前针对Redhat攻击的黑客也越来越多了.我们要如何为这类服务器做好安全加固工作呢?  一.  账户安全 1.1 锁定系统中多余的自建帐号 检查方 ...

  8. Do You Kown Asp.Net Core -- Asp.Net Core 2.0 未来web开发新趋势 Razor Page

    Razor Page介绍 前言 上周期待已久的Asp.Net Core 2.0提前发布了,一下子Net圈热闹了起来,2.0带来了很多新的特性和新的功能,其中Razor Page引起我的关注,作为web ...

  9. （hdu 6030） Happy Necklace 找规律+矩阵快速幂

    题目链接 :http://acm.hdu.edu.cn/showproblem.php?pid=6030 Problem Description Little Q wants to buy a nec ...

  10. 软工+C(2): 分数和checklist

    // 上一篇:题目设计.点评和评分 // 下一篇:超链接 教学里,建立清晰明确的评分规则并且一开始就公布,对于教师.助教.学生都是重要的. 公布时机 在课程开始的时候,就需要确定并公布评分机制,随着课 ...