react 基础知识列表

1.React基础使用
2.JSX语法规则
3.JSX语法糖遍历
4.安装 react-tools调试工具
5.React 定义组件（函数式组件）
6.React 定义组件（类式组件）
7.React 三大核心属性之一 state 使用
8.React 三大核心属性之一 props 使用
9.React 三大核心属性之一 refs------不要过度使用 ref
10.React 非受控组件与受控组件的区别
11.React 生命周期（非常重要）
- 注意：新版钩子和旧版钩子的区别
- 最常用的重要的钩子
12.React DOMDE Diffing 算法
- 自己diff总结：
13.React 脚手架的使用
- 1. 创建项目并启动
- react脚手架创建项目特别注意项
- reportWebVitals 页面性能分析文件（需要 web-vitals库的支持）；
- setupTests.js 组件单元测试的文件（需要 jest-dom 库的支持）；
- **css样式模块化：**
- **快捷生成代码片段类式和函数式
- 引入组件顺序
- 脚手架创建组件
- 生成随机数字可用于当ID；uuid（大，不推荐）nanoid（小，推荐）
- Proptypes 用于限制传参规格等限制的使用
- **函数展开修改默认值的方法**
14.React 空白版本样式方便调试 todos
15.React 请求接口
- 注意： 1.跨域如下图解决办法
- 2.安装fehelper 整理请求接口格式化页面 json 文件
16.React 结构赋值连续结构赋值连续结构赋值
17.React

1.React基础使用

刚开始学习，就用简单的 html写，以后会用高阶写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title>01 react test</title>
</head>
<body><div id="test"></div><div id="test2"></div>
</body>
</html>
<script type="text/babel">// 创建虚拟 domconst VDOM = <h1><span>hello，React</span></h1>   // 创建虚拟 domconsole.log(VDOM,typeof VDOM,'虚拟 dom')const RDOM = document.getElementById('test2') // 创建真实 domconsole.log(RDOM,typeof  RDOM,'真实 dom') ReactDOM.render(VDOM,document.getElementById('test'))  // 渲染 dom 节点debugger; // 创建 调试点击调试看一看真实 dom和虚拟dom 的参数不同，虚拟dom 轻
</script>

区别：

虚拟 dom 是一个object 类型的对象，真实 dom 是节点；
虚拟 dom 比较轻，真实 dom 重，debugger 可查；
虚拟 dom 最终会被 react 转化为真实 dom，呈现在页面上；

2.JSX语法规则

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title>02 JSX语法糖</title>
</head>
<body><div id="test"></div>
</body>
<style>.title{background-color: pink;}
</style>
</html>
<script type="text/babel">const content = 'hello.react.jsx可好看了'// 创建虚拟 domconst RDOM = (<div><h1 className="title"><span style={{color:'#fff'}}>{content.toUpperCase()}</span></h1><input placeholder='请输入内容' /></div>)// 渲染 domReactDOM.render(RDOM,document.getElementById('test'))
</script>

jsx 语法糖规则

        1. 定义虚拟 DOM 时，不要写引号。2. 标签中混入 JS 表达式时要用{}。3. 样式的类名置顶不要用 class，要用 className。4. 内联样式，要用 style{{key:value}}的形式写。5. 根标签只能有一个。6. 标签必须闭合。<input />7. 标签首字母（1）.若小写字母开头， 则将该标签转化 html 中的同名元素，若 html 中无该标签对应的同名元素，则报错。（2）.若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错。

3.JSX语法糖遍历

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title>语法糖练习次日练习</title>
</head>
<body><div id="tang"></div>
</body>
</html>
<script type="text/babel">
const array = ['vue','react','uniapp']
const RDOM = (<div><h1>这是一个标题</h1><ul>{array.map((item,index)=>{return  <li key={index}>{item}</li>})}</ul></div>
)
ReactDOM.render(RDOM,document.getElementById('tang'))
</script>

4.安装 react-tools调试工具

下载地址：https://gitee.com/loki-demo/react_dev_tools

5.React 定义组件（函数式组件）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">// 创建函数式组件function MyTest() {console.log(this) // 此处的 this 是 undefined，因为 babel编译后开启了严格模式；return <h1>我是一个用函数定义的组件</h1>}// 渲染函数式组件到页面ReactDOM.render(<MyTest/>,document.getElementById('test'))
</script>

函数式组件注意

首字母必须大写
函数必须有返回值 return
渲染必须写组件标签，且闭合

渲染ReactDOM.render(…之后，发生了什么？

React 解析组件便签，找到 MyCompontent组件。
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实 DOM,随后呈现在页面中。

6.React 定义组件（类式组件）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">// 创建类式组件class MyCompontent extends React.Component  {render(){// render中this？ MyCompontent类组件对象；MyCompontent的实例对象return <h1>我是类式组件</h1>}}// 创建函数式组件ReactDOM.render(<MyCompontent /> , document.getElementById('test'))
</script>

函数式组件注意

首字母必须大写
函数必须有返回值 return
渲染必须写组件标签，且闭合

渲染ReactDOM.render(…之后，发生了什么？

React 解析组件便签，找到 MyCompontent组件。
发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用原型上的 render方法。
将 render 返回的虚拟 DOM 转为真实 DOM,随后呈现在页面中。

7.React 三大核心属性之一 state 使用

标准写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">class Weather extends React.Component{constructor(props){super(props)// 初始化状态this.state = {isHot:true}// 方法一  通过 bind 创建一个 this 可调用的 changeWeatherthis.changeWeather = this.changeWeather.bind(this)}render(){// 读取状态let {isHot} = this.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot?'严热':'寒冷'}</h1>}changeWeather(){// 修改 state 需要用 this.setState({}),只合并 不替换this.setState({isHot :  !this.state.isHot})}}ReactDOM.render(<Weather />,document.getElementById('test'))
</script>

简写方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">class Weather extends React.Component{// 初始化状态state = {isHot:true}render(){// 读取状态let {isHot} = this.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot?'严热':'寒冷'}</h1>}// 自定义方法 赋值语句+箭头函数changeWeather = () => {this.setState({isHot :  !this.state.isHot})}}// 渲染组件到页面ReactDOM.render(<Weather />,document.getElementById('test'))
</script>

8.React 三大核心属性之一 props 使用

标准写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script><title></title>
</head>
<body><div id="propsTest1"></div><div id="propsTest2"></div><div id="propsTest3"></div>
</body>
</html>
<script type="text/babel">class VDOM extends React.Component {render(){let {age,name,sex} = this.propsreturn (<ul><li>name:{name}</li><li>age:{age}岁</li><li>sex:{sex}</li></ul>)}}// 对标签属性进行类型，必要性的限制VDOM.propTypes = {name:PropTypes.string.isRequired,sex:PropTypes.string,age:PropTypes.number,speak:PropTypes.func , // 传递函数}// 对标签默认值设置VDOM.defaultProps = {sex:'o->6',age:18}let array = [ {name:'zhangsan',age:15,sex:'男'},{name:'lisi'},{name:'wangwu',age:12,sex:'男'}]ReactDOM.render(<VDOM {...array[0]} />,document.getElementById('propsTest1'))ReactDOM.render(<VDOM {...array[1]} />,document.getElementById('propsTest2'))ReactDOM.render(<VDOM {...array[2]} />,document.getElementById('propsTest3'))
</script>

简写写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script><title></title>
</head>
<body><div id="propsTest1"></div><div id="propsTest2"></div><div id="propsTest3"></div>
</body>
</html>
<script type="text/babel">class VDOM extends React.Component {// 对标签属性进行类型，必要性的限制static propTypes = {name:PropTypes.string.isRequired,sex:PropTypes.string,age:PropTypes.number,speak:PropTypes.func , // 传递函数}// 对标签默认值设置static defaultProps = {sex:'保密',age:18}render(){let {age,name,sex} = this.propsreturn (<ul><li>name:{name}</li><li>age:{age}岁</li><li>sex:{sex}</li></ul>)}}let array = [ {name:'zhangsan',age:15,sex:'男'},{name:'lisi'},{name:'wangwu',age:12,sex:'男'}]ReactDOM.render(<VDOM {...array[0]} />,document.getElementById('propsTest1'))ReactDOM.render(<VDOM {...array[1]} />,document.getElementById('propsTest2'))ReactDOM.render(<VDOM {...array[2]} />,document.getElementById('propsTest3'))
</script>

注意：
1. 简写方法需要写在类内且需要用 static 修饰；props 只读不能修改；
2. {…person} 可以处理对象也可以处理数组；正常情况下只能处理数组，但是这里{}包裹起来，就可以暴露对象了跟 vue 的很像；
3. propTypes 和 PropTypes 要区分，前者是类的属性，后者是类的属性的类型.string.number.func(方法)；
4. defaultProps 是这是prop 的默认值；
5. constructor类的构造器的作用？
作用：
（1）初始化 state 中数据，为事件处理函数绑定实例即bind 一个this可调用的方法。

如果该构造器只有以上两个作用，完全可以不用，直接写 state 和剪头函数的方法就可以完全取代构造器。是否使用构造器取决于是否要在构造器中能接受 this.props ，如果用构造器，必须 super 和接受

constructor(props){super(props)console.log(this.props)}

9.React 三大核心属性之一 refs------不要过度使用 ref

字符串类型的 ref ->虽然简单，不建议使用，以后可能被移出，说效率不高！！！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">class Demo extends React.Component{getInfo = ()=>{console.log(this.refs.inputLeft.value)this.refs.inputLeft.value = ''  // 清空数据}getInfo2 = ()=>{console.log(this.refs.inputRight.value)this.refs.inputRight.value = ''  // 清空数据}render(){return (<div><input ref='inputLeft' type="text" /><button onClick={this.getInfo}>获取 input1的值</button><input ref='inputRight' onBlur={this.getInfo2} type="text" /></div>)}}ReactDOM.render(<Demo />,document.getElementById('test'))
</script>

回调类型的 ref

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">class Demo extends React.Component{getInfo = ()=>{console.log(this.inputLeft.value)}getInfo2 = ()=>{console.log(this.inputRight.value)}render(){return (<div><input ref={ (c) => { this.inputLeft = c} } type="text" /><button onClick={this.getInfo}>获取 input1的值</button><input ref={c => this.inputRight = c} onBlur={this.getInfo2} type="text" /></div>)}}ReactDOM.render(<Demo />,document.getElementById('test'))
</script>

注意：

ref={ © => { this.inputLeft = c} } 回调方法要用{}括起来；
onClick={this.getInfo} 普通方法也要用{}括起来；
ref={ © => { this.inputLeft = c} }（复杂写法），ref={c => this.inputRight = c} （简写写法）
注释 jsx 语法用{}括起来变成 js，在用/**/括起来就可以实现注释 jsx；

 {/*<input ref={ (c) => { this.inputLeft = c} } type="text" />*/}

内联 ref={ © => { this.inputLeft = c} }调用过程中可能会出现渲染调用两次的问题；实例 ref 的写法 ref={this.inputLeftF}
对应生成一个 inputLeftF = (e)=>{ this.inputLeft = e }就不会出现两次调用 ref 的问题；这个问题不大，怎么写都可以，但是要知道这个问题的实质，如果有人较真，可以跟他操作一波~~

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">class Demo extends React.Component{state = {isHot:false}getInfo = ()=>{console.log(this.inputLeft.value)}getInfo2 = ()=>{console.log(this.inputRight.value)}// 函数式 ref页面渲染后不会出现重复调用问题inputLeftF = (e)=>{console.log('只渲染一次')this.inputLeft = e}changeW=()=>{let {isHot} = this.statethis.setState({isHot:!isHot})}render(){return (<div>{/*内联 ref 重新渲染会被执行两次 不影响其他功能可用*/}{/*<input ref={ (c) => { this.inputLeft = c;console.log('@..重新渲染触发两次',c)} } type="text" />*/}{/* 函数式 ref 重新渲染不会执行两次，只执行一次*/}<input type="text" ref={this.inputLeftF} /><button onClick={this.getInfo}>获取 input1的值</button><input ref={c => this.inputRight = c} onBlur={this.getInfo2} type="text" /><br/><button onClick={this.changeW}>今天天气很{this.state.isHot?'炎热':'凉爽'}</button></div>)}}ReactDOM.render(<Demo />,document.getElementById('test'))
</script>

createRef的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">class Demo extends React.Component{inputLeft = React.createRef()  // 创建 ref 容器 专人专用inputRight = React.createRef() //创建 ref 容器 专人专用getInfo = ()=>{console.log(this.inputLeft.current.value)this.inputLeft.current.value = ''}getInfo2 = ()=>{console.log(this.inputRight.current.value) // 获取节点的值this.inputRight.current.value = ''}render(){return (<div><input ref={this.inputLeft} type="text" /><button onClick={this.getInfo}>获取 input1的值</button>{/*调用*/}<input ref={this.inputRight} onBlur={this.getInfo2} type="text" />  </div>)}}ReactDOM.render(<Demo />,document.getElementById('test'))
</script>

注意：

inputLeft = React.createRef() 创建 ref 容器专人专用
<input ref={this.inputLeft} type="text" /> 调用
this.inputLeft.current.value 获取节点的值

10.React 非受控组件与受控组件的区别

非受控组件（先用现取）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">class Demo extends React.Component{submitHandle = (event)=>{event.preventDefault()console.log(this.username.value,this.password.value)}// 非受控组件render(){return (<div><h1>非受控组件（现用现取）</h1><form onSubmit={this.submitHandle}><input ref={c=>this.username=c} type="text" /><input ref={c=>this.password=c} type="password" /><br/><button type="submit">获取用户名和密码</button></form></div>)}}ReactDOM.render(<Demo />,document.getElementById('test'))
</script>

受控组件（维护到 state 状态中）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">class Demo extends React.Component{state = {username:'',password:''}// 提交按钮submitHandle = (event)=>{event.preventDefault()let {username,password} = this.stateconsole.log(username,password)}userNameChange=(e)=>{console.log(e.target.value)this.setState({username:e.target.value})}passWordChange=(e)=>{console.log(e.target.value)this.setState({password:e.target.value})}// 非受控组件render(){return (<div><h1>受控组件（提前维护到状态中）</h1><form onSubmit={this.submitHandle}><input onChange={this.userNameChange} type="text" /><input onChange={this.passWordChange} type="password" /><br/><button type="submit">获取用户名和密码</button></form></div>)}}ReactDOM.render(<Demo />,document.getElementById('test'))
</script>

3. 高阶函数和柯里化

什么是高阶函数？参数是函数或者返回值是函数满足其一就是高阶函数，
常用高阶函数：map 、filter、reduce、setTimeout等
什么是函数柯里化？
自己的理解就是函数里套函数再套函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><title></title>
</head>
<body><div id="test"></div>
</body>
</html>
<script type="text/babel">class Demo extends React.Component{state = {username:'',password:''}// 提交按钮submitHandle = (event)=>{event.preventDefault()console.log(this.state)}// submitOnChange(types,e){//     this.setState({[types]:e.target.value })// }submitOnChange(types){return e=>  this.setState({[types]:e.target.value })}// 非受控组件render(){return (<div><h1>受控组件（提前维护到状态中）</h1><form onSubmit={this.submitHandle}>{/*<input onChange={(e)=>{this.submitOnChange('username',e)}} type="text" /><input onChange={(e)=>{this.submitOnChange('password',e)}} type="password" /><br/>*/}<input onChange={this.submitOnChange('username')} type="text" /><input onChange={this.submitOnChange('password')} type="password" /><br /><button type="submit">获取用户名和密码</button></form></div>)}}ReactDOM.render(<Demo />,document.getElementById('test'))
</script>

11.React 生命周期（非常重要）

1. 旧版本

初始化阶段：由ReactDOM.render()触发 ----初次渲染;
1. constructor()
2. componentWillMount()
3. render() ====》必须用
4. componentDidMount() ====》常用
1）注意：一般在这个钩子做一些初始化的事情，开启定时器，发送网络请求，订阅消息等；
更新阶段：由组件内部 this.setState()或父组件 render 触发;
0. componentWillReceiveProps()=>只有在父组件更新 render 时触发
1. shouldComponentUpdate() （this.forceUpdate()没有这个）
2. componentWillUpdate()
3. render()====》必须用
4. componentDidMount()
卸载组件：由ReactDOM.unmountComponentAtNode(documnet.getElemengById())触发;
1. componentWillUnmount() ====》常用
1）注意：一般在这个钩子做一些收尾的事情，关闭定时器，取消订阅消息；

旧版图如下图

2.新版生命周期

初始化阶段：由ReactDOM.render()触发 ---- 初次渲染;
1. constructor()
2. getDerivedStateFromProps()
3. render() ====》必须用
4. componentDidMount() ====》常用
1）注意：一般在这个钩子做一些初始化的事情，开启定时器，发送网络请求，订阅消息等；
更新阶段：由组件内部 this.setState()或父组件 render 触发;
0. getDerivedStateFromProps() ----> 挂载完后都执行这个
1. shouldComponentUpdate()
2. render()
3. getSnapshotBeforeUpdate() —> 更新要不要搞个快照（留一下之前数据）
4. componentDidMount()
卸载组件：由ReactDOM.unmountComponentAtNode(documnet.getElemengById())触发;
componentWillUnmount() ====》常用
1）注意：一般在这个钩子做一些收尾的事情，关闭定时器，取消订阅消息；

图如下图

注意：新版钩子和旧版钩子的区别

新版废弃了旧版的三个 will 钩子（componentWillMount，componentWillUpdate，componentWillReceiveProps）；
新增了两个方法 (getSnapshotBeforeUpdate , getDerivedStateFromProps)

最常用的重要的钩子

render:初始化渲染或更新渲染调用；
componentDidMount:开启监听，发送 ajax 请求；
componentWillUnmount:做一些收尾工作，如：清理定时器；

12.React DOMDE Diffing 算法

自己diff总结：

diff 算法就是找不同；按照节点来找的，如果节点里面还有节点那么 diff 会深层比对；

13.React 脚手架的使用

1. 创建项目并启动

安装脚手架：npm i -g create-react-app （window） sudo npm i -g create-react-app（max）
创建项目：create-react-app 项目名称
启动项目：yarn start
打包项目：yarn build
把 wepack.config.js 默认隐藏起来的文件暴露出来；yarn eject

react脚手架创建项目特别注意项

%PUBLIC_URL% 代表public 文件路径；
<meta name="viewport" content="width=device-width, initial-scale=1" /> 用于开启视口，适配移动端；
<meta name="theme-color" content="#000000" />用于配置浏览器页签+地址栏的颜色（仅支持安卓手机浏览器，兼容性不太好；）；
<meta name="description" content="Web site created using create-react-app" /> 描述网站信息；
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 用于置顶网页添加到手机主屏幕后的图标；
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 应用加壳配置文件，即H5可转化为Android；
<noscript>You need to enable JavaScript to run this app.</noscript> 浏览器不支持 js 展示标签中的内容；
React.StrictMode严格监控 <App />组件中的写法是否合理；

ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

reportWebVitals 页面性能分析文件（需要 web-vitals库的支持）；
setupTests.js 组件单元测试的文件（需要 jest-dom 库的支持）；
css样式模块化：

1).css文件命名为：index.module.css
2).在 jsx 文件中引入hello使用hello.title

import { Component } from "react";
import hello from './index.module.css'export default class Hello extends Component {render() {return (<h1 className={hello.title}>我是 Hello 组件</h1>)}
}

**快捷生成代码片段类式和函数式

## rcc  是快捷生成类式代码片段
## rfc  是快捷生成函数式代码片段
**

注意：需要安装插件才能使用快捷键

引入组件顺序

1>. 第三方方上面 ->react react-dom nanoid uuid
2>. 自己的文件 ->自己定义的组件
3>. 样式文件 ->css 文件

脚手架创建组件

import React, { Component } from 'react'          //  引入第三方文件
import './index.css'                              // 引入自定义样式
export default class Item extends Component {     // export default 暴露节点state = {                                     // 存变量，相当于vue 中的 datamouse: false}mouseEnter = (flag) => {                      // 方法要使用剪头函数return () => {this.setState({ mouse: flag })}}change = (id) => {                                    // 方法要使用剪头函数 return (e) => {                                   // 高阶函数this.props.updataTodo(id, e.target.checked)   // 调用父组件传过来的方法并传回去返回值；}}handerDel = (id)=>{console.log(id,'id....')}render() {let { item } = this.props                     // 结构赋值获取用的值let { mouse } = this.state                    // 结构赋值获取用的值return (<li style={{ background: mouse ? '#f9f9f9' : '#fff' }} className='item'onMouseEnter={this.mouseEnter(true)}      // 鼠标进入触发方法onMouseLeave={this.mouseEnter(false)}     // 鼠标离开触发方法onChange={this.change(item.id)}           //鼠标改变触发方法，并在该方法中调用父组件传过来的函数，因为有括号，所以这个 change 方法需要使用高阶函数，不然就会默认执行，也可使用删除那个按钮那样，不实用高阶函数；><label className='item-left'><input type='checkbox' defaultChecked={item.finish} /> {item.name}</label><div className='item-del' @click={()=>{this.handerDel(item.id)}} style={{ display: mouse && item.finish ? 'block' : 'none' }}>Del</div> // 不使用高阶函数</li>)}
}

注意：1.如果想在方法中传值，需要使用高阶函数或者不是高阶@click={()=>{this.handerDel(item.id)}} ；2.调用父组件函数传过来的函数 this.props.updataTodo()

生成随机数字可用于当ID；uuid（大，不推荐）nanoid（小，推荐）

安装 uuid nanoid

npm i uuid          /       yarn add  uuid
npm i nanoid        /       yarn add  nanoid

使用 uuid nanoid

import {nanoid} from 'nanoid';console.log(nanoid());

Proptypes 用于限制传参规格等限制的使用

安装 Proptypes

npm i prop-types          /       yarn add  prop-types

使用 Proptypes

import Proptypes from 'prop-types';// 对接受到的参数进行必要性的限制static propTypes = {name:PropTypes.string.isRequired,sex:PropTypes.string,age:PropTypes.number,speak:PropTypes.func , // 传递函数}// 对标签默认值设置static defaultProps = {sex:'保密',age:18}

函数展开修改默认值的方法

checkAll = () => {const {todos}  = this.statelet newTodos = todos.map(item=>{return {...item,finish:true}  // 返回展开的item 并把 item 中的所有 finish 值都替换为 true})}

14.React 空白版本样式方便调试 todos

下载链接

15.React 请求接口

1. 建议使用 axios轻量级不建议使用 jquery 太大；
2. 安装 axios

yarn add axios   ||  npm install axios

3. 使用

import axios from 'axios'//调用接口
axios.get().then(response => { },error => { }
)

注意： 1.跨域如下图解决办法

解决跨域方法一

解决跨域方法二

解决跨域方法三

直接找后端，让后端处理！

2.安装fehelper 整理请求接口格式化页面 json 文件

地址：https://www.baidufe.com/fehelper/index/index.html

安装方法
下载当前最新版*.crx
chrome浏览器地址栏输入：chrome://extensions/ 并打开
右上角开启开发者模式
拖拽crx到当前页面，完成安装

16.React 结构赋值连续结构赋值连续结构赋值

17.React

从头开始学习React相关推荐

从头开始学习Adobe Photoshop CC图像编辑
完整课程,涵盖所有关于Adobe Photoshop CC的基本课程你会学到什么课程获取:从头开始学习Adobe Photoshop CC图像编辑-云桥网 Photoshop用户界面之旅转型导论 ...
GameMaker Studio从头开始学习设计和开发3款游戏
从头开始学习设计和开发3款游戏(无需经验) 你会学到什么如何塑造令人敬畏的角色如何使用GameMakerStudio 2 视频游戏编程基本二维动画如何查找和修复bug 如何给你的游戏编故事从 ...
从头开始学习Unity着色器
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确)|时长:56节课(4h 26m) |大小解压后:2.89 GB ...
怎样快速学习React
react简单学习路线(实用版) 学习一门新的技术之前有必要了解一下该技术在专业领域的评价,使用的领域,以及整体的学习路线,总之尽可能多的在入坑之前了解相关方面的信息.不要什么都不去查就直接学了,这个 ...
学习react心得及总结
注意学习这个在D盘:小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说 ...
上线数天获2400星，这个GitHub项目帮你从头开始学习数据科学
从头开始学习数据科学的免费资源. >>>> 如何入门数据科学? 这个 GitHub 项目提供了一份免费学习资源,既包括超详细的学习路线图,又涵盖多个免费线上课程.大量数据科学项 ...
学习react的心路历程（一）
我是react小白,网上的react教程成堆成堆的,我就不在这里写什么教程,巴拉巴拉以下我的学习"心得"! 我是在"技术胖"的带领下学习的react,这个教程是 ...
react学习预备知识_在10分钟内学习React基础知识
react学习预备知识 If you want to learn the basics of React in the time it takes you to drink a cup of coff ...
重新学习 React (二) Diffing 算法
前几天面试问道 react 的相关知识,对我打击比较大,感觉对 react 认识非常肤浅,所以在这里重新梳理一下,想想之前没有仔细思考过的东西. 另外有说的不对的地方还请帮我指正一下,先谢谢各位啦. ...

从头开始学习React

react 基础知识列表

1.React基础使用

2.JSX语法规则

3.JSX语法糖遍历

4.安装 react-tools调试工具

5.React 定义组件（函数式组件）

6.React 定义组件（类式组件）

7.React 三大核心属性之一 state 使用

8.React 三大核心属性之一 props 使用

9.React 三大核心属性之一 refs------不要过度使用 ref

10.React 非受控组件与受控组件的区别

11.React 生命周期（非常重要）

注意：新版钩子和旧版钩子的区别

最常用的重要的钩子

12.React DOMDE Diffing 算法

自己diff总结：

13.React 脚手架的使用

1. 创建项目并启动

react脚手架创建项目特别注意项

reportWebVitals 页面性能分析文件（需要 web-vitals库的支持）；

setupTests.js 组件单元测试的文件（需要 jest-dom 库的支持）；

css样式模块化：

**快捷生成代码片段类式和函数式

引入组件顺序

脚手架创建组件

生成随机数字可用于当ID；uuid（大，不推荐）nanoid（小，推荐）

Proptypes 用于限制传参规格等限制的使用

函数展开修改默认值的方法

14.React 空白版本样式方便调试 todos

15.React 请求接口

注意： 1.跨域如下图解决办法

2.安装fehelper 整理请求接口格式化页面 json 文件

16.React 结构赋值连续结构赋值连续结构赋值

17.React

从头开始学习React相关推荐

最新文章

热门文章

从头开始学习React

react 基础知识列表

1.React基础使用

2.JSX语法规则

3.JSX语法糖遍历

4.安装 react-tools调试工具

5.React 定义组件（函数式组件）

6.React 定义组件（类式组件）

7.React 三大核心属性之一 state 使用

8.React 三大核心属性之一 props 使用

9.React 三大核心属性之一 refs------不要过度使用 ref

10.React 非受控组件与受控组件的区别

11.React 生命周期 （非常重要）

注意：新版钩子和旧版钩子的区别

最常用的重要的钩子

12.React DOMDE Diffing 算法

自己diff总结：

13.React 脚手架的使用

1. 创建项目并启动

react脚手架创建项目特别注意项

reportWebVitals 页面 性能分析文件（需要 web-vitals库的支持）；

setupTests.js 组件单元测试的文件（需要 jest-dom 库的支持）；

css样式模块化：

**快捷生成代码片段 类式和函数式

引入组件顺序

脚手架创建组件

生成随机数字 可用于当ID；uuid（大，不推荐）nanoid（小，推荐）

Proptypes 用于限制传参规格等限制的使用

函数展开修改默认值的方法

14.React 空白版本样式 方便调试 todos

15.React 请求接口

注意： 1.跨域如下图解决办法

2.安装fehelper 整理请求接口格式化页面 json 文件

16.React 结构赋值 连续结构赋值 连续结构赋值

17.React

从头开始学习React相关推荐

最新文章

热门文章

11.React 生命周期（非常重要）

reportWebVitals 页面性能分析文件（需要 web-vitals库的支持）；

**快捷生成代码片段类式和函数式

生成随机数字可用于当ID；uuid（大，不推荐）nanoid（小，推荐）

14.React 空白版本样式方便调试 todos

16.React 结构赋值连续结构赋值连续结构赋值