React知识点总结1

最近打算把react知识点总结下:

React特点

1、虚拟DOM

在内存中操作DOM,在内存中创建数据结构,只会更新有差异的地方

2、组件化

页面分成若干个组件,每个组件包含逻辑结构和样式

组件仅包含自身逻辑,与其他组件高度解耦

可重复使用

3、单向数据流

JSX

javascript XML

react发明的新的语法规范,允许javascript和html混合在一起,最后通过bable解析成常规的javascript

时间: 2024-09-29 08:50:27

React知识点总结1的相关文章

React 知识点

一:React的生命周期 1.1 组件生命周期的三种状态展示: - Mounting: 已插入了真是dom结构 - Updating: 正在被重新渲染 - Unmounting: 已移出了真实dom结构 1.2 关于 生命周期的处理函数(will表示进入状态之前调用,did表示进入状态之后调用) componentWillMount()//组件将要渲染到真实dom节点: componentDidMount()//组件已经渲染到真实dom节点: componentWillUpdate()//sta

react知识点总结(持续更新。。。)

一.webpack 1. 什么是以及为什么要使用webpack 现在的网页功能越来越丰富,所需要的JavaScript和模块也会很多,为开发更加简洁,出现了以下方法,如模块化,scss,typescript等. 但有些语法是浏览器无法识别的.所以需要用到webpack. WebPack是模块打包器,它会将浏览器不能支持不能识别的语言语法,打包转换成浏览器可识别的语法,如(Scss,TypeScript等). 2. webpack 与 gulp 的区别 两者并无太多的可比性 1.webpack是为

React 解析/ 第二节 使用 Reac

官方脚手架 create-react-app React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpack + ES6,无需开发者自行配置,只需通过一些命令就能快速构建 React 开发环境.运行项目,并带有热更新,且支持打包生成开发环境可用的构建版本. 说明:CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解,如果你是新手,我们强烈建议先在不用构建工具的情况下学习 React,

微信小程序入门案例

本文通过具体的实例记录微信小程序的入门知识. 1.特点 不需要安装 依赖微信应用 更接近原生APP 丰富的框架及API可达到快速开发的目的 2.工具使用 在开发的过程中可以使用微信开发者工具,更加直观的进行调式及看到界面:下载地址 3.目录结构 pages:小程序页面,包括js(页面逻辑),wxml(页面结构),wxss(页面样式)和json(页面配置) app.js:小程序公共逻辑 app.json:小程序公共配置 app.wxss:小城市公共样式 4.公共配置 window:设置默认页面的窗

React之小知识点总结

总结react中常常被忽略的小知识点 1)即使state里设置成和之前的值一样,render也会重新渲染 2)父组件传给子组件的属性(props是只读的,在子组件中已在this.state里将属性赋值给定义的变量),如果属性在父组件中可以操作改变值的话,那么在子组件中就不建议修改,如果属性在父组件不操作,那么在子组件中就可以修改 3)通过bind绑定的函数,收到参数和事件时,事件会在参数后面,示例: <a  onClick={this.handleClick.bind(this, 'click'

react生命周期知识点

react生命周期知识点 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.render5.componentDidMount 当组件在服务端被实例化,首次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.r

React零碎知识点回顾

1.JSX更接近于js而不是HTML,所以React DOM使用驼峰属性命名规则来取代原来的HTML属性名. 2.JSX的本质是个函数对象.下面两个例子是相似的: const element = ( <h1 className="greeting"> Hello, world! </h1> ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!'

React Native细节知识点总结&lt;一&gt;

1.propTypes: static propTypes = { name:PropTypes.string, ID:PropTypes.number.isRequired, } 'isRequired' 表示如果不传递这个属性,那么开发阶段中,系统会出现警告,让我们对其进行属性确认,也就是说是否为必须属性. 1>属性为任何类型: React.PropTypes.any 2>属性是否是 JavaScript 基本类型: React.PropTypes.array; React.PropTyp

react native 知识点总结(一)

一.关于react native 版本的升级 参照文档:http://reactnative.cn/docs/0.45/upgrading.html react-native -v   查看当前版本 二.关于react native 的生命周期 http://www.jianshu.com/p/986bcbcd02aa componentWillMount 中state的值改变,不会引发render的再次渲染.如果componentDidMount中改变state值,会引发render的再次渲染