react学习记录（一）

1、纯函数，不能改变传入的参数，例如：function add(a,b) { return a+b } 就是一个纯函数，
所有react组件都必须像纯函数一样保证props不被修改

2、组件分为函数组件和class组件，分别书写为：
函数组件：

function Welcome(props){
	return <h1>Hello, {props.name}</h1>
}

它接收唯一带有数据的“props”(代表属性)对象并返回一个react元素
class组件：

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

这两个组件是等效的，组件名称必须以大写字母开头

3、通过调用ReactDOM.render（）来渲染元素

4、将函数组件转换成class组件

1. 创建一个同名的es6 class组件，并继承于React.Component
2. 添加一个空的render()方法
3. 将函数体移动到render()方法中
4. 在render()方法中使用this.props替换props
5. 删除剩余的空函数声明

5、在class组件中添加局部的state
constructor(props) {
super(props)；
this.state = { … }
}

6、setState（）

1. 不要直接修改state，应该使用setState()
2. State的更新可能是异步的
3. State的更新会被合并

7、数据是向下流动的
通常被称为“自上而下”或者“单向”数据流

8、react的事件命名采用驼峰式命名
react不能通过返回false的方式阻止默认行为，必须显式的使用preventDefault
a、为了在回调中使用‘this’，this.handleClick = this.handleClick.bind(this)必不可少,onClick = { this.handleClick}
b、或者在定义方法的时候使用箭头函数，handleClick = () => { ...},onClick = {this.handleClick }
c、在调用的回调中使用箭头函数，onClick = { () => { this.handleClick() } }

9、与运算符 &&
在js中，true&& expression总是会返回expression，false&&expression总是会返回false
因此，如果条件是true,&&右边的元素就会被渲染，如果是false,react会跳过并忽略它
三目运算符
condition ? true : false

10、阻止组件渲染
可以让render方法返回null，而不进行任何渲染

function WarningBanner(props){
	if(!props.warn){
		return null;
	}
	return (...)
}

11、列表和key
通过map遍历动态的插入

• 标签，需要给每个列表元素分配一个key属性
  key帮助react识别哪些元素改变了，比如被添加或者删除。因此需要给数组中的每一个元素赋予一个确定的标识。
  如果列表项目有排序功能，不建议使用索引index用作key值

• 12、表单
  受控组件: 、、
  handleChange在每次按键石都会执行并更新React的state,e.target.value获取值

  13、React是用JS构建快速响应的大型Web应用程序的首选方式，在facebook和Instagram上表现优秀

  14、安装环境准备： node.js、脚手架 create-react-app,mkDir 新建文件夹

  -----------------------------------2020.10.27-------------------------------------------------

  15、react目录文件介绍：
  README.md：markdown文件，一些项目说明和描述
  package.json：项目用的第三方包的信息，
  package-lock.json：锁定安装时的版本号，保证版本一致，项目版本控制文件。
  .gitignore：git的管理文件，一般吧node_modules忽略不上传git
  node_modules：存放下载的第三方包
  public：存放公用的文件，favicon.ico存放左上角标题上网页的图标，index.html模板文件，容错标签，js没有加载出来时展示的内容，manifest.json移动端的配置
  src：源代码目录，入口文件index.js

  16、PWA serviceWorker.js
  优点：

  1. 生成桌面小图标，不需要打开浏览器，方便用户访问
  2. 通过网络缓存提升页面访问速度，达到渐进式的页面甚至离线访问，提升用户体验
  3. 实现类似app的推送功能，生成系统通知推送给用户

  17、JSX： JavaScript + xml,<> 当成html解析，{}当成js来解析，
  class 为 className
  18、 包裹组件，需要引入再用

  -----------------------------------2020.10.28-------------------------------------------------