浅谈React官网学习笔记

1、JSX:

JSX代码中出现的标签既不是一个字符串,也不是HTML。

JSX是JavaScript的一种语法扩展。建议在React使用JSX编写代码,以让其更直观。JSX像一种模板语言,但可以使用JavaScript的全部特性。

JSX用于产生React元素。

1)      内嵌JavaScript表达式:

在JSX中可以内嵌任何有效的 JavaScript表达式 ,只需要将该表达式用一对花括号包裹即可。

可以将JSX换行缩进以提高代码的可读性,此时需要注意的是:为了避免 分号自动插入 的bug,即使只有一行JSX代码,仍然建议将JSX代码包裹在小括号里面。

2)      JSX也是一种表达式:

编译完,JSX表达式变成了普通的JS对象。这意味着可以在if和for循环里面使用JSX,也可以把JSX赋值给变量,作为参数,或作为一个函数的返回值。

3)      JSX属性的用法:

可以在一对引号中直接将字符串字面量作为属性值,也可以在一对花括号中直接使用JavaScript表达式作为属性值,但注意不要同时在一个属性里使用引号和花括号。

4)      JSX子元素的用法:

如果一个标签为空,像XML一样添加 /> 自结束即可;也可以在JSX标签中嵌套子元素。

相比HTML,JSX更接近JavaScript,React DOM属性使用 驼峰式命名法代替HTML属性命名法。如,在JSX中 class 需要写作 className , tabindex 需要写作 tabIndex 

5)      JSX默认阻止注入攻击:

在JSX可以安全的嵌入渲染用户输入的内容;在渲染前React DOM默认对嵌入JSX中的值进行 编码 ,以确保应用中不会被注入任何不安全代码。任何值在渲染之前都会被转换为字符串,以避免 XSS (cross-site-scripting) 攻击。

6)      JSX代表对象:

Babel将JSX编译为 React.createElement() 调用。React.createElement() 会做适当的检查来帮助开发者写0bug的代码,最终会生成对象,这些对象就是React元素,这些元素详细描述了最终在屏幕上如何展示,React通过这些对象构造DOM,并持续对其更新。

 

2、渲染元素

元素是React apps中最小的构建部件。一个元素描述的是希望屏幕上呈现的样子。

不同于浏览器的DOM元素,React元素只是一个对象,并且创建一个元素是非常廉价的。React DOM只需要更新DOM到对应的React元素上。

1)      在DOM里渲染元素:

HTML中的DOM节点称为根DOM节点,因为在它内部的一切都将被React DOM管理。

通常只有一个根DOM节点,当然也可以分离出多个根DOM节点。

通过ReactDOM.render() 方法,可以把React元素渲染到根DOM节点上。

2)      更新被渲染的元素:

React元素是不可变的。

当创建一个元素时,不能改变它们的子元素或属性。

唯一能更新UI的方式是创建一个新的元素并且传给ReactDOM.render()。

3)      React只更新需要的部分:

ReactDOM会把元素当前的值,包括其子元素,与之前的值进行比较,并且只会进行必要的更新。

经验表明,应该思考的是在一个特定的时刻UI应该是什么样子,而不是怎样去改变它,这种思维方式能帮助减少很多bug。

 

3、组件和props

组件能把UI切割成独立的,可重用的部件,可以独立的思考每一个部件。

从概念上看,components 就像Javascript 的函数。允许任意的输入(props),并返回React元素,描述元素应该怎么显示在屏幕上。

1)      函数以及类组件:

A.     函数式组件:

定义组件最简单的方法就是写一个Javascript函数,这个函数是一个合法的React元素,因为它接收一个props对象参数并返回一个React元素。这样的组件称为函数式组件。

functionHelloReact(props) {
  	return <h1>Hello,{props.name}</h1>;
}

B.      类组件:

可以使用ES6的class来定义一个组件。

classHelloReact extends React.Component {
  	render() {
    		return <h1>Hello, {this.props.name}</h1>;
  	}
}

2)      渲染组件:

组件可以返回一个元素作为返回值,元素可以是HTML标签,也可以是用户定义的组件。

调用ReactDOM.render()方法渲染组件,当遇到一个用户定义的组件表示的元素时,React会把JSX里的属性作为一个对象传递到组件中,这个对象通常称为props。

组件的名字最好都是大写字母开头的,且要求是一个闭合标签。

3)      组合组件:

组件可以引用其他的组件作为输出。

组件必须返回一个根组件,一般用一个<div>去包住所有的组件。

4)      切割组件:

不要害怕把组件切割成更小的组件。

切割组件可能看起来像麻烦的工作,但对于一个大型的应用来说,拥有一个可重用的组件是一个回报很高的事情。

一个好的经验法则:如果UI中某些组件被重用了多次或者自身就足够复杂,将它们作为可重用的组件是一个好的选择。

5)      props是只读的:

无论声明一个函数组件或一个类组件,它都不能修改props。

应用的UI是动态的并且经常变化的,这就需要引入state。

 

4、state和生命周期

state跟porps很相似,但是state是组件私有的,并受组件控制。

相比函数组件,类组件有一些额外的功能,比如添加state和生命周期。

1)      函数组件转化为类组件:

可以通过5步把函数组件转化为类组件:

A.     创建一个同名的类组件并且继承React.Compoent;

B.      添加一个空的方法叫做render();

C.      把函数里面的内容移到render方法里面;

D.     把render()里面的props替换成this.props;

E.      删掉之前的函数声明的组件。

2)      添加state到类组件:

可以通过3步把props移到state:

A.     把render()方法里的this.props.*替换成 this.state.*;

B.      添加constructor ()用来初始化this.state,注意将props作为参数传到constructor,在constructor函数体中执行super(props);当参数传递ReactDOM.render()时,React调用组件中的constructor函数。

C.      从元素中移除props。

3)      添加周期方法到类组件:

在有许多组件的应用里, 当组件被销毁的时候释放掉资源是非常重要的。

通常在类组件里声明一些特别的方法,当组件mounts和 unmounts的时候去运行这些方法,这些方法被称为生命周期方法钩子。

一个典型的实例是:在componentDidMount这个生命周期的函数方法中设置定时器,在componentWillUnmount这个生命周期的函数方法中卸载定时器。

4)      正确使用state:

A.     别直接修改state的值

修改state的值请用setState(),不要直接对this.state赋值,唯一能声明this.state的地方只有在constructor里。

B.      state的更新有可能是异步的

React 为了性能,可能会把批量处理多次的setState() 调用在一个的更新里。

因为this.props和this.state可能异步更新了,所有不应该依赖他们的值来计算下一个state。

为了解决这个问题,让setState()接收一个函数比接收一个对象的方式更好,这个函数会把前一个state作为第一个参数,更新的props作为第二参数:

this.setState((prevState, props) => ({
  	counter: prevState.counter + props.increment
}))

C.      state的更新是合并后的

当调用setState()时,React会合并提供的对象到当前的state里,这意味着在state包含几个独立的变量时,能通过单独调用setState(),独立更新它们。

5)      单向数据流:

所有的父组件或者子组件都不知道一个组件是stateful或stateless的,并且它们也不应该关心自己是被定义成一个函数组件或者是类组件。

一个组件可能会把自己的state作为props传递给他们的子组件中,这就是单向数据流(从上往下)。任何的state都属于一些特定的组件,并且任何的数据或UI视图只能影响在其组件树下面的组件。

在React app里,无论一个stateful或stateless的组件都被认为组件独立的细节都可能随着时间而改变。能用stateless组件代替stateful组件,反之亦然。

 

5、处理事件

处理React元素事件跟处理DOM元素事件很相似,但有一些不同:

React事件使用驼峰式命名的,而不是全小写。

JSX里要传递函数给事件处理,而不是字符串,也即应该用花括号而不能用引号。

不能通过return false来阻止默认事件,必须显示地调用e.preventDefault,这里的e是合成事件,React定义这些合成事件是根据W3C标准的,所以不需要担心浏览器兼容问题。

当用React时,当DOM被创建时,一般都不需要调用addEventListener来添加监听器到DOM上,相反,只需要在元素最初被渲染时添加一个监听器。当用es6的class定义一个组件时,一个通常的模式是在class上把事件处理定义一个方法。

注意this的指向,在事件处理函数内部的this不指向该组件,通常的解决方法是对事件处理函数进行bind(this)操作。

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值