我的react学习之路

开始

react

1.用于构建用户界面的 JavaScript 库
2.声明式 组件化 一次学习，随处编写
3.react特点 简洁 灵活

3.react环境搭建

1） 建立一个项目的目录，在目录中 npm init -y
会在目录中产生一个文件package.json
2) npm i react --save (或yarn add react)
会在目录中有一个node_modules目录，
找到react目录，
找到这个目录下的umd目录，拷贝umd目录下react.development.js
到自己的js目录下
3） npm i react-dom --save(或 yarn add react-dom)
在node_modules目录下找到react-dom目录，在这个目录下找到umd目录，
在react-dom／umd目录下找到react-dom.development.js文件拷贝到
自己的js目录下
4） npm i babel-standalone --save（或yarn add babel-standalone）
在node_modules目录下找到babel-standalone目录
拷贝这个目录下的babel.js 到js目录下
5） 引入顺序
a）react.development.js
b）react－dom.development.js
c） babel.js
6) 注意这个问题
script的type属性指定为 text/babel
7） babel
es6转为es5
解析jsx

jsx

是一种语法糖
jsx是javascript扩展的意思
相当于 js+xml
jsx 不是必须的，但是用jsx可以提高开发效率
jsx的原理就是 React.createElement(tag,{attrs},content)

react 差值表达式是一个{ }

  jsx 注意事项
     a.对象不能直接渲染,数组以字符串的形式进行渲染
     b. jsx中 class 改为className
     c. 事件的首字母要大写 onXxx 形式

1. react当中遍历列表要指定key值，可以使用map方法进行映射;
. 遍历对象的关键，把对象的key值变为一个数组
Object.keys(obj)
2. 遍历列表的时候，注意标签的语义化
3. return 后面要有字符
4. 事件绑定处理函数，要进行传参数
this.方法名字.bind(this,参数)
事件处理函数的最后一个参数时事件对象
5.setState
a) 异步

b） 连续执行对象会合并
       this.setState({
         key:value
       },callback)
c) this.setState((prevState,props)=>{
     return {
        key:value
     }
},callback)
连续执行多次获放入队列中一次执行

组件

1. 无状态组件

 const 组件的名字=(props)=>{

   return jsx表达式
 }

2. 类组件

 class 组件的名字 extends React.Component{
    render(){
         // this  常用的属性 state props refs
        // state 是组件内部的数据  props 来自组件外部的数据  refs 标识一个组件的节点
    	return jsx表达式
    }
 }

3.受控组件与非受控组件

 表单元素它的值来自于state 这个组件就是受控组件，否则就是非受控组件
 普通组件来说，它的数据都来自于外部（props) 这个组件就是受控组件

4.组件挂载阶段，会自定执行的钩子

  constructor
  render
  componentDidMount

进阶

脚手架环境搭建

全局安装create-react-app

• npm install -g create-react-app
• npx create-react-app your-app

创建一个项目
create-react-app your-app

挂载阶段四个钩子函数的执行次序

a.constructor(props,context)
b. getDerivedStateFromProps(props,state)
c.render
d.componentDidMount

卸载阶段的钩子函数只有一个

componentWillUnmount

更新阶段的钩子函数

a) shouldComponentUpdate(nextProps,nextState)
返回true 就会render
返回false 不回render
可以加条件减少不必要的渲染，增加性能

PureComponent 进行浅比对，进行性能的优化 （纯组件）

对无状态组件用 React.memo(组件)

我们把 参数是组件 返回值也是组件 这类组件我们叫 “高阶组件”(HOC)
本质是高阶函数 （map filter forEach …)

b) getSnapshotBeforeUpdate(prevProps,prevState)
必须和componentDidUpdate一起用
必须返回一个值
不能和旧版的钩子函数一起使用
目的是为了返回数据更新前的dom状态
c) componentDidUpdate(prevProps,prevState,snapshot)