React 入门学习笔记2

【React 入门学习笔记2】的更多相关文章

React 入门学习笔记整理目录

React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 React 入门学习笔记整理(五)-- state React 入门学习笔记整理(六)-- 组件通信 React 入门学习笔记整理(七)-- 生命周期 React 入门学习笔记整理(八)-- todoList React 入门学习笔记整理(九)--路由…

React 入门学习笔记2

摘自阮一峰:React入门实例教程,转载请注明出处. 一.获取真实的DOM节点组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它插入文档以后,才会变成真实的 DOM .根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现. 但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref…

React 入门学习笔记1

摘自阮一峰:React入门实例教程,转载请注明出处. 一. 使用React的html模板使用React, 我们需要加载3个库,react.js, react-dom.js, 和browser.js.它们必须首先加载. 其中react是核心库,react-dom是提供与dom相关的功能.browser是将JSX语法转换为JS语法,但这一步很耗时间. 所以,模板结构大致如下: <!DOCTYPE html> <html> <head> <script src=&qu…

React 入门学习笔记整理（一）——搭建环境

使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下,输入Win+R输入cmd ,打开运行窗口,输入 node -v 显示版本号则表示安装成功.接下来可以看下是否安装npm,输入npm -v ,显示版本号则表示安装成功. 2.全局安装 npm i create-react-app -g. 安装完成之后,输入 create-react-app -V检测是…

React 入门学习笔记整理（二）—— JSX简介与语法

先看下这段代码: import React from 'react'; //最终渲染需要调用ReactDOM库,将jsx渲染都页面中 import ReactDOM from 'react-dom'; import * as serviceWorker from './serviceWorker'; let h = <React.Fragment> <h2>hello</h2> <ul></ul> </React.Fragment>…

React 入门学习笔记整理（三）—— 组件

1.定义组件 1)函数组件 function GreateH(props){ return <div> <h2>hello,{props.name}</h2> </div> } ReactDOM.render(<GreateH name="kristy"/>, document.getElementById('root')); 2)类组件 class GreateH extends React.Component{ rende…

React 入门学习笔记整理（四）—— 事件

1.事件定义 React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 在类组件中定义函数,通过this.函数名去调用 class GreateH extends React.Component{ static defaultProps = {name:'CoCo'}; handler(){ console.log("click"); } render(){ return <div&…

React 入门学习笔记整理（五）—— state

1.state 1)组件本省也是有状态的,定义在组件内部的state中,state的状态只能由组件自身改变,任何其他组件都不能改变. 当需要改变state时,通过调用setState方法来改变,setState会导致组件重新渲染. class GreateH extends React.Component{ constructor(props){ super(props); this.state ={ name:'CoCo' } } handler(params){ this.setState(…

React 入门学习笔记整理（六）—— 组件通信

1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的值,并显示 class GreateH extends React.Component{ static defaultProps = { name:'CoCo' }; constructor(props){ super(props); this.state ={ name:props.name } } ren…

React 入门学习笔记整理（七）—— 生命周期

(1)react 生命周期只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑定方法,可以在构造函数中完成. 注意:状态不会随着属性的更新而更新.为了保证属性和状态同步,通常需要状态提升. 2) static getDerivedStateFromProps(nextProps, prevState) 组件实例化和接收新属性时将会getDerivedStateFromProp…