![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
Skillex
这个作者很懒,什么都没留下…
展开
-
React-----学习笔记-----React简介(一)
React简介 React 起源于 Facebook 的内部项目,帮助你构建页面UI的库。React组件相当于MVC中的View,只提供UI层面的解决方案。 React中的核心概念 虚拟DOM(Virtual DOM) Diff算法 虚拟DOM React将DOM抽象为虚拟DOM,虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提...转载 2018-08-05 17:46:05 · 112 阅读 · 0 评论 -
React-----学习笔记-----React基本环境安装(二)
安装node.js,到node.js官网下载对应的安装包安装好环境; 安装create-react-app $npm install -g create-react-app 这条命令会在我们的电脑上安装一条叫create-react-app的命令,安装完成后可以使用它来构建一个react的前端工程: $create-react-app my-react Success! Crea...转载 2018-08-05 18:21:10 · 444 阅读 · 0 评论 -
React-----学习笔记-----使用 JSX 描述 UI 信息(三)
修改src/index.js中的内容: import React, {Component} from 'react' import ReactDOM from 'react-dom' import './index.css' class Header extends Component{ render () { return ( <d...转载 2018-08-05 18:55:25 · 139 阅读 · 0 评论 -
React-----学习笔记-----组件的render方法(四)
一个组件类必须要实现render方法,render方法必须要返回jsx元素,必须要用一个外层的 JSX元素把所有内容包裹起来。返回并列多个JSX元素是不合法的: 错误示例: ... render () { return ( <div>first</div> <div>second</div> ) } ... 必须...转载 2018-08-05 19:14:46 · 1342 阅读 · 0 评论 -
React-----学习笔记-----组件的组合、嵌套和组件树(五)
现在已经有了Header组件,构建新的组件Title,并在Header中使用: import React, {Component} from 'react' import ReactDOM from 'react-dom' import './index.css' class Header extends Component{ render () { return...转载 2018-08-05 19:34:51 · 298 阅读 · 0 评论 -
React-----学习笔记-----事件监听(六)
React.js里监听事件,只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性: class Title extends Component { handleClickOnTitle = () => { console.log('click on title') } render () { ...转载 2018-08-05 20:58:31 · 996 阅读 · 0 评论 -
React-----学习笔记-----组件的 state 和 setState(七)
一个组件的显示形态是可以由它数据状态和配置参数决定的。一个组件可以拥有自己的状态,React.js 的state 用来存储这种可变化的状态 import React, {Component} from 'react' export default class LikeButton extends Component{ constructor () { super(...转载 2018-08-05 21:52:16 · 310 阅读 · 0 评论 -
React-----学习笔记-----组件的props(八)
组件是相互独立、可复用的单元,一个组件可能在不同地方被用到。但是在不同的场景下对这个组件的需求可能会根据情况有所不同,让组件能适应不同场景下的需求,就要让组件具有一定的“可配置”性 React.js 的 props 就可以帮助我们达到这个效果。每个组件都可以接受一个 props 参数,它是一个对象,包含了所有你对这个组件的配置 在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作...转载 2018-08-05 22:17:21 · 218 阅读 · 0 评论 -
React-----学习笔记-----state和props(九)
state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。可以认为 state是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新,setState 会导致组件的重新渲染 props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配...转载 2018-08-05 22:28:31 · 106 阅读 · 0 评论