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. 一天一个Linux命令--find

    文件查找:(以find为主)  which:查找命令字所在的位置  locate:模糊匹配(只要包含关键字的文件都查找出来)         不是实时的,基于数据库查找, updatedb升级loca ...

  2. crosstool-ng-1.22.0搭建开发环境

        Ubuntu16.04无法安装libtool,只能在Ubuntu14.04以下版本安装. cp 下载/crosstool-ng-1.22.0.tar.bz2 /home/hou/ tar -x ...

  3. LeetCode算法题-Heaters（Java实现）

    这是悦乐书的第239次更新,第252篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第106题(顺位题号是475).冬天来了!您在比赛期间的第一份工作是设计一个固定温暖半径 ...

  4. 【Linux基础】查看硬件信息-内存和硬盘

     1.使用free命令查看内存使用 (1)内存总量大小:查看Mem中的total值3697M free -m total used free shared buffers cached -/+ buf ...

  5. MATLAB accumarray

    先看看subs和val的具体内容 subs = [1 1 1; 2 1 2; 2 3 2; 2 1 2; 2 3 2]; subs = 1     1     1 2     1     2 2    ...

  6. docker pull报错failed to register layer: Error processing tar file(exit status 1): open permission denied

    近来在一个云主机上操作docker pull,报错如下: failed to register layer: Error processing ): open /etc/init.d/hwclock. ...

  7. Java 生态核心知识点整理

    又到了求职的金三银四的黄金月份,我相信有不少小伙伴已经摩拳擦掌的准备寻找下一份工作. 就目前国内的面试模式来讲,在面试前积极的准备面试,复习整个 Java 知识体系将变得非常重要,可以很负责任的说一句 ...

  8. Bootstrap开发框架视频整理

    最近到客户处进行实地培训,整理了很多培训的材料,现将它们录制相关主题的视频,作为我的Bootstrap开发框架的知识补充,希望给感兴趣的朋友进行了解.培训内容主要包括基础框架部分.MVC框架部分.Bo ...

  9. CGPoint、CGSize、CGRect、CGRectEdge的详细使用

    http://blog.sina.com.cn/s/blog_953e22700101r7lz.html 在CGGeometry.h里的 CGPoint.CGSize.CGRect.CGRectEdg ...

  10. deb包转化为rpm包

    deb文件格式本是ubuntu的安装文件,那么我想要在fedora中安装,需要把deb格式转化成rpm格式,我们用skype举例: 1.下载转换工具alien_8.78.tar.gz 2.deb转化成 ...