接触学习React差不多一年多的时间了,乘空档中整理下学习的react相关知识,归纳总结下,便于后期更好的学习和提升对React开发的认识。
React核心思想是:封装组件。
React主要大概包含以下这些概念:
·JSX语法糖
·React组件
·Virtual DOM(虚拟DOM)
·Data Flow(数据流)
一、JSX语法糖
什么是jsx语法糖?
百度百科这样说:语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。
为什么要引入jsx语法糖?
传统的MVC是将模板放置在其他地方,比如用script标签或者模板文件,再在js中通过某种手段引用模板,按照这样的思路,想想我们多少次面对四处分散的的模板片段不知所措?纠结模板引擎,纠结模板存放的位置,纠结如何引用模板……?
jsx语法糖就是为我们解决这些纠结的。简单的来说,react认为组件才是王道,而组件与模板是紧密关联的,组件模板与组件逻辑分离是让问题变得复杂化,而jsx这种语法就是把HTML模板直接嵌入写在了js代码里面,做到组件模板与组件逻辑结合在一起不分离。
jsx语法糖知识点概要
1、jsx编写DOM结构时候、可是原生的HTML也有可能是引入的React组件。通过首字母大小写来区分,小写的HTML标签,大写开头是React组件
2、Js保留字符冲突,html的class在jsx里面要写成className。for需要写成htmlFor、行内样式margin-left这样的需要写成驼峰式marginLeft
3、style属性接受由CSS属性构成的JS对象
4、onChange事件表现更接近我们的直觉(不需要onBlur去触发)更多不同参阅官网
5、属性值需要使用表达式,用 {} 替换 “”
6、jsx注释与js注释写法一样,需要用 { } 包起来
7、HTML转义,React需要显示 © 这样的字符串转义,防止XSS,按照常规的书写成 © 是不能正常显示到,解决方案
·直接使用UTF-8字符©
·使用对应字符的Unicode(万国码)编码
·使用数组组装
·直接插入原始的HTML
8、自定义HTML属性,jsx如果有不在HTML规范中的属性,这个属性会被忽略,如果要自定义属性,使用data- 前缀。 可访问自定义属性 aria- 前缀
9、属性扩散 …
const props = { “name”: “Tab”, “age”: “man” }
等于
属性扩散可以被覆盖
二、组件
什么是组件?
总结(自):一个完成的功能集合,就可以叫做一个组件。
什么是的React组件?
可以这么说,一个React应用就是由React组件构建而成,React组件两个核心概念:props与state,一个组件是通过这两个属性的值在render方法里面生成这个组件对应的HTML结构。
注:组件生成的HTML结构,有且仅有一个根节点。
props,由外部通过jsx属性传入React组件内,传入后,初始化成了this.props 对象,通过this.props使用。一般传入的props值是不可以更改的。虽然js对象可以做任何事,但对于this.props这个对象来说,千万不要轻易去更改设置里面的值,会带来很多想不到的麻烦。
state 是组件的当前状态,通常说的组件的“状态机”,根据状态state不同,呈现不同的UI展示。一旦状态(实际就是数据)更改,组件会自动调用 render重新渲染UI,这个更改,是通过this.setState方法来出发的。
注:此处提到UI的重新渲染是通过状态(数据)发生改变,触发重新渲染UI,react开发,切记改变思维,有操作DOM触发页面重新渲染,改变成由数据驱动页面重新渲染
原则:让组件尽可能的少状态。
哪些数据属性可以当作状态?当更改这个状态需要更新UI的,就可以处理成为一个state。
无状态组件:纯粹的函数来定义,没有生命周期,只是简单接受props渲染DOM结构。
组件生命周期
getInitialState 初始化this.state的值,组件状态之前调用一次(ES5与ES6实现方式不同)
getDefaultProps 初始化this.props 的值,组件创建时调用一次并缓存返回 this.props对象(ES5与ES6实现方式不同)
render 必须 组件生成HTML结构
componentWillMount 组件装载之前调用,render之前调用,只调用一次
componentDidMount 组件装载完成之后调用,render之后调用,只调用一次,此方法内可以获取到组件的DOM节点
componentWillReceiveProps 组件接受到新的props进行调用 nextProps,初始化render不执行
shouldComponentUpdate 当props或者state发生变化时执行,在render之前,当新的props或者state不需要更新组件时,返回false,初始化render不执行
componentWillUpdate 组件更新之前调用,更新render之前,初始化render不执行
componentDidUpdate 组件更新之后调用,更新render之后,初始化render不执行
componentWillUnmount 组件卸载时调用
事件处理
React有“合成事件”与“原生事件”。
合成事件,有react提供的事件方法,事件委托的方式绑定在组件最上层,组件卸载的时候会自动销毁绑定
原生事件,HTML的原生事件,在组件生命周期componentDidMount里addEventListener绑定,在生命周期componentWillUnount里面 removeEventListener解除绑定
给事件传递参数
bind(this, param1,param2,……);
DOM操作
findDOMNode(),由react-dom提供, 在组件生命周期 componentDidMound 可以拿到DOM元素,不用使用在无状态组件上
Refs,在jsx编写DOM结构时候定义一个属性 ref=name,然后通过 this.refs.name 获取到DOM元素
组件组合
1、插入循环的子元素,需要设置key
2、this.props.children
组件之间通信
1、父子组件之间通信
2、非父子组件之间通信
表单
受控组件:通过state控制表单显示值
非受控组件:defaultValue、defaultChecked
三、Virtual DOM
虚拟DOM是react优化加载性能提出的一个概念,在react开发实现的应用上,纯正两套DOM 一套实际渲染出来的DOM一套是虚拟DOM,两者一一对应。
四、Data Flow
1、Flux(其他文档待续)
2、Redux(其他文档待续)