React基础入门（一）_IT分享知识网

大家好，欢迎来到IT知识分享网。

1、React简介

官网
英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/

描述介绍
用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源

React特点
1、声明式编码
2、组件化编码
3、React Native 编写原生应用
4、高效（优秀的Diffing算法）

React高效的原因
1、使用虚拟(virtual)DOM，不总是直接操作页面真实DOM；
2、DOM Diffing算法，最小化页面重绘；

2、React的基本使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello_react</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 v16.8.4--> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM v16.8.4--> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!-- 引入babel，用于将jsx转为js --> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */ //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </script> </body> </html>

2.1、创建虚拟DOM的两种方式

1、纯JS方式（一般不用）

<body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" > //1.创建虚拟DOM（纯js创建过于复杂） const VDOM = React.createElement('h1',{ 
     id:'title'},React.createElement('span',{ 
     },'Hello,React')) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </script> </body>

2、JSX方式（JSX相当于JS写虚拟DOM的语法糖）

<body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!-- 引入babel，用于将jsx转为js --> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号，因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </script> </body>

2.2、jsx语法规则

JSX简介
1、全称：JavaScript XML
2、react定义的一种类似于XML的JS扩展语法：JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
3、作用：用来简化创建虚拟DOM

写法：var ele = <h1>Hello JSX!</h1>
注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象

基本语法规则
1、定义虚拟DOM时，不要写引号；
2、标签中混入JS表达式时要用{}；
3、样式的类名指定不要用class，要用className；
4、内联样式，要用style={ {key:value}}的形式去写；
5、只有一个根标签；
6、标签必须闭合；
7、标签首字母：
(1)若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

<script type="text/babel" > const myId = 'aTgUiGu' const myData = 'HeLlo,rEaCt' //1.创建虚拟DOM const VDOM = ( <div> <h2 className="title" id={ 
     myId.toLowerCase()}> <span style={ 
     { 
     color:'white',fontSize:'29px'}}>{ 
     myData.toLowerCase()}</span> </h2> <h2 className="title" id={ 
     myId.toUpperCase()}> <span style={ 
     { 
     color:'white',fontSize:'29px'}}>{ 
     myData.toLowerCase()}</span> </h2> <input type="text"/> </div> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </script>

babel.js的作用
1、浏览器不能直接解析JSX代码，需要babel转译为纯JS的代码才能运行；
2、只要用了JSX，都要加上type="text/babel"，声明需要babel来处理；

3、模块与组件、模块化与组件化的理解

模块
1、理解：向外提供特定功能的js程序，一般就是一个js文件；
2、为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂；
3、作用：复用js，简化js的编写，提高js运行效率；

组件
1、理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)；
2、为什么要用组件：一个界面的功能更复杂；
3、作用：复用编码，简化项目编码，提高运行效率；

模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用；

组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用；

4、React面向组件编程

4.1、React定义组件两种方式

1、函数式组件

<script type="text/babel"> //1.创建函数式组件 function MyComponent(){ 
      console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2> } //2.渲染组件到页面 ReactDOM.render(<MyComponent/>,document.getElementById('test')) /* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。 */ </script>

2、类式组件

<!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!-- 引入babel，用于将jsx转为js --> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> //1.创建类式组件 class MyComponent11 extends React.Component { 
      render(){ 
      //render是放在哪里的？—— MyComponent11的原型对象上，供实例使用。 //render中的this是谁？—— MyComponent11的实例对象 <=> MyComponent11组件实例对象。 console.log('render中的this:',this); return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2> } } //2.渲染组件到页面 ReactDOM.render(<MyComponent11/>,document.getElementById('test')) /* 执行了ReactDOM.render(<MyComponent11/>.......之后，发生了什么？ 1.React解析组件标签，找到了MyComponent11组件。 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。 */ </script>

4.2、组件三大核心属性1：state

理解
1、state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)；
2、组件被称为”状态机”，通过更新组件的state来更新对应的页面显示(重新渲染组件)；
3、相当于Vue中的data；

注意
1、组件中render方法中的this为组件实例对象；
2、组件自定义的方法中this为undefined，如何解决？

强制绑定this: 通过函数对象的bind()；
箭头函数；

案例
点击文字，天气产生变化

<script type="text/babel"> //1.创建组件 class Weather extends React.Component{ 
      //构造器调用几次？ ———— 1次 constructor(props){ 
      super(props) console.log('constructor', this); //初始化状态 this.state = { 
     isHot:false,wind:'微风'} //解决changeWeather中this指向问题 this.changeWeather = this.changeWeather.bind(this) } //render调用几次？ ———— 1+n次 1是初始化的那次，n是状态更新的次数 render(){ 
      console.log('render'); //读取状态 const { 
     isHot,wind} = this.state return <h1 onClick={ 
     this.changeWeather}>今天天气很{ 
     isHot ? '炎热' : '凉爽'}，{ 
     wind}</h1> } //changeWeather调用几次？ ———— 点几次调几次 changeWeather(){ 
      //changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用 //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用 //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined console.log('changeWeather'); //获取原来的isHot值 const isHot = this.state.isHot //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。 this.setState({ 
     isHot:!isHot}) console.log(this); //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！ //this.state.isHot = !isHot //这是错误的写法 } } //2.渲染组件到页面 ReactDOM.render(<Weather/>,document.getElementById('test')) </script>

state简单写法

<script type="text/babel"> // 1、创建组件 class Weather extends React.Component { 
      // 初始化状态 state = { 
      isHot: false, wind: '风' } render() { 
      const { 
      isHot, wind } = this.state return <h1 onClick={ 
     this.changeWeather}>今天天气很{ 
     isHot ? '炎热' : '凉爽'}，{ 
     wind}</h1> } // 自定义方法————要用赋值语句的形式+箭头函数 changeWeather = () => { 
      const isHot = this.state.isHot this.setState({ 
      isHot: !isHot }) } } // 2、渲染组件到页面 ReactDOM.render(<Weather/>, document.getElementById('test)) </script>

4.3、组件三大核心属性2：props

理解
1、每个组件对象都会有props(properties的简写)属性；
2、组件标签的所有属性都保存在props中；

作用
1、通过标签属性从组件外向组件内传递变化的数据；
2、组件内部不要修改props数据，props为只读属性；

props基本使用

// 创建组件 class Person extends React.Component { render() { const { name, age, sex } = this.props return ( <ul> <li>姓名:{name}</li> <li>年龄:{age + 1}</li> <li>性别:{sex}</li> </ul> ) } } // 渲染组件 ReactDOM.render(<Person name="tom" age={19} sex="男">, document.getElementById('test1')) ReactDOM.render(<Person name="jack" age={20} sex="女">, document.getElementById('test2')) // 扩展属性: 将对象的所有属性通过props传递 const p = { name: '张三', age: 20, sex: '男' } ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))

props传参进行限制

<!-- 引入prop-types，用于对组件标签属性进行限制 --> <script type="text/javascript" src="../js/prop-types.js"></script>

<body> <!-- 准备好一个“容器” --> <div id="test1"></div> <div id="test2"></div> <div id="test3"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!-- 引入babel，用于将jsx转为js --> <script type="text/javascript" src="../js/babel.min.js"></script> <!-- 引入prop-types，用于对组件标签属性进行限制 --> <script type="text/javascript" src="../js/prop-types.js"></script> <script type="text/babel"> //创建组件 class Person extends React.Component{ 
      render(){ 
      // console.log(this); const { 
     name,age,sex} = this.props //props是只读的 //this.props.name = 'jack' //此行代码会报错，因为props是只读的 return ( <ul> <li>姓名：{ 
     name}</li> <li>性别：{ 
     sex}</li> <li>年龄：{ 
     age+1}</li> </ul> ) } } //对标签属性进行类型、必要性的限制 Person.propTypes = { 
      name:PropTypes.string.isRequired, //限制name必传，且为字符串 sex:PropTypes.string,//限制sex为字符串 age:PropTypes.number,//限制age为数值 speak:PropTypes.func,//限制speak为函数 } //指定默认标签属性值 Person.defaultProps = { 
      sex:'男',//sex默认值为男 age:18 //age默认值为18 } //渲染组件到页面 ReactDOM.render(<Person name={ 
     100} speak={ 
     speak}/>,document.getElementById('test1')) ReactDOM.render(<Person name="tom" age={ 
     18} sex="女"/>,document.getElementById('test2')) const p = { 
     name:'老刘',age:18,sex:'女'} // console.log('@',...p); // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3')) ReactDOM.render(<Person { 
     ...p}/>,document.getElementById('test3')) function speak(){ 
      console.log('我说话了'); } </script> </body>

props简写方式

<script type="text/babel"> //创建组件 class Person extends React.Component{ 
      constructor(props){ 
      super(props) console.log('constructor',this.props); // 希望通过this访问props: 构造器与super都传递props // 直接访问props: 构造器传递props即可 //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props // console.log(props); } //对标签属性进行类型、必要性的限制 static propTypes = { 
      name:PropTypes.string.isRequired, //限制name必传，且为字符串 sex:PropTypes.string,//限制sex为字符串 age:PropTypes.number,//限制age为数值 } //指定默认标签属性值 static defaultProps = { 
      sex:'男',//sex默认值为男 age:18 //age默认值为18 } render(){ 
      // console.log(this); const { 
     name,age,sex} = this.props //props是只读的 //this.props.name = 'jack' //此行代码会报错，因为props是只读的 return ( <ul> <li>姓名：{ 
     name}</li> <li>性别：{ 
     sex}</li> <li>年龄：{ 
     age+1}</li> </ul> ) } } //渲染组件到页面 ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1')) </script>

函数组件使用props（默认第一个参数就是props）

<script type="text/babel"> //创建组件 function Person (props){ 
      const { 
     name,age,sex} = props return ( <ul> <li>姓名：{ 
     name}</li> <li>性别：{ 
     sex}</li> <li>年龄：{ 
     age}</li> </ul> ) } Person.propTypes = { 
      name:PropTypes.string.isRequired, //限制name必传，且为字符串 sex:PropTypes.string,//限制sex为字符串 age:PropTypes.number,//限制age为数值 } //指定默认标签属性值 Person.defaultProps = { 
      sex:'男',//sex默认值为男 age:18 //age默认值为18 } //渲染组件到页面 ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1')) </script>

4.4、组件三大核心属性3：refs与事件处理

理解
组件内的标签可以定义ref属性来标识自己

<script type="text/babel"> //创建组件 class Demo extends React.Component{ 
      //展示左侧输入框的数据 showData = ()=>{ 
      const { 
     input1} = this.refs alert(input1.value) } //展示右侧输入框的数据 showData2 = ()=>{ 
      const { 
     input2} = this.refs alert(input2.value) } render(){ 
      return( <div> <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp; <button onClick={ 
     this.showData}>点我提示左侧的数据</button>&nbsp; <input ref="input2" onBlur={ 
     this.showData2} type="text" placeholder="失去焦点提示数据"/> </div> ) } } //渲染组件到页面 ReactDOM.render(<Demo/>,document.getElementById('test')) </script>

2、回调形式的ref

<script type="text/babel"> //创建组件 class Demo extends React.Component{ 
      //展示左侧输入框的数据 showData = ()=>{ 
      const { 
     input1} = this alert(input1.value) } //展示右侧输入框的数据 showData2 = ()=>{ 
      const { 
     input2} = this alert(input2.value) } render(){ 
      return( <div> <input ref={ 
     c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp; <button onClick={ 
     this.showData}>点我提示左侧的数据</button>&nbsp; <input onBlur={ 
     this.showData2} ref={ 
     c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp; </div> ) } } //渲染组件到页面 ReactDOM.render(<Demo/>,document.getElementById('test')) </script>

<script type="text/babel"> //创建组件 class Demo extends React.Component{ 
      state = { 
     isHot:false} showInfo = ()=>{ 
      const { 
     input1} = this alert(input1.value) } changeWeather = ()=>{ 
      //获取原来的状态 const { 
     isHot} = this.state //更新状态 this.setState({ 
     isHot:!isHot}) } saveInput = (c)=>{ 
      this.input1 = c; console.log('@',c); } render(){ 
      const { 
     isHot} = this.state return( <div> <h2>今天天气很{ 
     isHot ? '炎热':'凉爽'}</h2> // 1、内联形式的ref回调函数，更新会执行两次 { 
     /*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/} // 2、class的绑定函数形式的ref，可避免更新执行两次的问题 <input ref={ 
     this.saveInput} type="text"/><br/><br/> <button onClick={ 
     this.showInfo}>点我提示输入的数据</button> <button onClick={ 
     this.changeWeather}>点我切换天气</button> </div> ) } } //渲染组件到页面 ReactDOM.render(<Demo/>,document.getElementById('test')) </script>

正常工作中，内联ref的写法较多，一般会忽略更新执行两次的问题（问题不大，了解即可）

3、createRef创建ref容器

<script type="text/babel"> //创建组件 class Demo extends React.Component{ 
      /* React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的 */ myRef = React.createRef() myRef2 = React.createRef() //展示左侧输入框的数据 showData = ()=>{ 
      alert(this.myRef.current.value); } //展示右侧输入框的数据 showData2 = ()=>{ 
      alert(this.myRef2.current.value); } render(){ 
      return( <div> <input ref={ 
     this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp; <button onClick={ 
     this.showData}>点我提示左侧的数据</button>&nbsp; <input onBlur={ 
     this.showData2} ref={ 
     this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp; </div> ) } } //渲染组件到页面 ReactDOM.render(<Demo/>,document.getElementById('test')) </script>

React事件处理

<script type="text/babel"> //创建组件 class Demo extends React.Component{ 
      /* (1).通过onXxx属性指定事件处理函数(注意大小写) a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性 b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效 (2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref */ //创建ref容器 myRef = React.createRef() myRef2 = React.createRef() //展示左侧输入框的数据 showData = (event)=>{ 
      console.log(event.target); alert(this.myRef.current.value); } //展示右侧输入框的数据 showData2 = (event)=>{ 
      // 通过event.target即可获取到值，无需通过ref的形式获取，避免ref滥用情况 alert(event.target.value); } render(){ 
      return( <div> <input ref={ 
     this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp; <button onClick={ 
     this.showData}>点我提示左侧的数据</button>&nbsp; <input onBlur={ 
     this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp; </div> ) } } //渲染组件到页面 ReactDOM.render(<Demo/>,document.getElementById('test')) </script>

4.4、React受控组件和非受控组件

受控组件
1、表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似；
2、受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验；
3、受控组件只有继承React.Component才会有状态；
4、受控组件必须要在表单上使用onChange事件来绑定对应的事件；

import React, { Component } from 'react' export default class Shoukong extends Component { // 这样的写法也是声明在实例上的对象 state = { username: "ff", // 给组件状态设置默认值，在实时修改时进行校验 } // e为原生的事件绑定对象 handleChange = (e) => { // 获取原生对象上的属性 let name = e.target.name; this.setState({ username: e.target.value }) } render() { return ( <div> <p>{this.state.username}</p> 用户名：<input type="text" value={this.state.username} onChange={ 
       this.handleChange} /> </div> ) } }

非受控组件
在虚拟DOM节点上声明一个ref属性，并且将创建好的引用赋值给这个ref属性
react会自动将输入框中输入的值放在实例的ref属性上

import React, { Component } from 'react' export default class Feishou extends Component{ constructor(){ super(); // 在构造函数中创建一个引用 this.myref=React.createRef(); } handleSubmit = (e) => { // 阻止原生默认事件的触发(刷新) e.preventDefault(); console.log(this.myref.current.value); } render() { return ( <form onSubmit={ 
       this.handleSubmit}> {/* 自动将输入框中输入的值放在实例的myref属性上 */} <input type="text" ref={this.myref} /> <button>提交</button> {/* 手动提交 */} </form> ) } }

非受控组件在底层实现时是在其内部维护了自己的状态state，这样表现出用户输入任何值都能反应到元素上。

对比受控组件和非受控组件的输入流程：
非受控组件：用户输入A => input 中显示A
受控组件：用户输入A => 触发onChange事件 => handleChange 中设置 state.name = “A” => 渲染input使他的value变成A

官方强烈推荐使用受控组件，因为它能更好的控制组件的生命流程。

组件的value属性与React中的状态绑定
组件内声明了onChange事件处理value的变化

5、生命周期

5.1、初了解

简介：生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子

案例：组件挂载界面之后，文字透明度开始发生循环变化

<script type="text/babel"> class Life extends React.Component { 
      state = { 
      opacity: 1 } // 组件挂载 componentDidMount() { 
      console.log('组件挂载成功') this.timer = setInterval(() => { 
      let { 
      opacity } = this.state opacity -= 0.1 if (opacity <= 0) opacity = 1 this.setState({ 
     opacity}) }, 300) } death = () => { 
      ReactDOM.unmountComponentAtNode(document.getElementById('test')) } // 组件卸载 componentWillUnmount() { 
      console.log('组件卸载'); clearInterval(this.timer) } render() { 
      console.log('render'); const { 
      opacity } = this.state return ( <div> <h2 style={ 
     { 
     opacity}}>文字透明度循环变化</h2> <button onClick={ 
     this.death}>消失</button> </div> ) } } // 组件渲染 ReactDOM.render(<Life/>, document.getElementById('test')) </script>

componentDidMount：组件挂载时触发一次；

componentWillUnmount：组件卸载时触发一次；

5.2、旧版 – 生命周期

<script type="text/babel"> //创建组件 class Count extends React.Component{ 
      /* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息 2. 更新阶段: 由组件内部this.setSate()或父组件render触发 1. shouldComponentUpdate() 2. componentWillUpdate() 3. render() =====> 必须使用的一个 4. componentDidUpdate() 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发 1. componentWillUnmount() =====> 常用 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息 */ //构造器 constructor(props){ 
      console.log('Count---constructor'); super(props) //初始化状态 this.state = { 
     count:0} } //加1按钮的回调 add = ()=>{ 
      //获取原状态 const { 
     count} = this.state //更新状态 this.setState({ 
     count:count+1}) } //卸载组件按钮的回调 death = ()=>{ 
      ReactDOM.unmountComponentAtNode(document.getElementById('test')) } //强制更新按钮的回调 force = ()=>{ 
      this.forceUpdate() } //组件将要挂载的钩子 componentWillMount(){ 
      console.log('Count---componentWillMount'); } //组件挂载完毕的钩子 componentDidMount(){ 
      console.log('Count---componentDidMount'); } //组件将要卸载的钩子 componentWillUnmount(){ 
      console.log('Count---componentWillUnmount'); } //控制组件更新的“阀门” shouldComponentUpdate(){ 
      console.log('Count---shouldComponentUpdate'); return true } //组件将要更新的钩子 componentWillUpdate(){ 
      console.log('Count---componentWillUpdate'); } //组件更新完毕的钩子 componentDidUpdate(){ 
      console.log('Count---componentDidUpdate'); } render(){ 
      console.log('Count---render'); const { 
     count} = this.state return( <div> <h2>当前求和为：{ 
     count}</h2> <button onClick={ 
     this.add}>点我+1</button> <button onClick={ 
     this.death}>卸载组件</button> <button onClick={ 
     this.force}>不更改任何状态中的数据，强制更新一下</button> </div> ) } } //渲染组件 ReactDOM.render(<Count/>,document.getElementById('test')) </script>

<script type="text/babel"> //创建组件 //父组件A class A extends React.Component{ 
      //初始化状态 state = { 
     carName:'奔驰'} changeCar = ()=>{ 
      this.setState({ 
     carName:'奥拓'}) } render(){ 
      return( <div> <div>我是A组件</div> <button onClick={ 
     this.changeCar}>换车</button> <B carName={ 
     this.state.carName}/> </div> ) } } //子组件B class B extends React.Component{ 
      //组件将要接收新的props的钩子 componentWillReceiveProps(props){ 
      console.log('B---componentWillReceiveProps',props); } //控制组件更新的“阀门” shouldComponentUpdate(){ 
      console.log('B---shouldComponentUpdate'); return true } //组件将要更新的钩子 componentWillUpdate(){ 
      console.log('B---componentWillUpdate'); } //组件更新完毕的钩子 componentDidUpdate(){ 
      console.log('B---componentDidUpdate'); } render(){ 
      console.log('B---render'); return( <div>我是B组件，接收到的车是:{ 
     this.props.carName}</div> ) } } //渲染组件 ReactDOM.render(<A/>,document.getElementById('test')) </script>

5.2、新版 – 生命周期

<script type="text/babel"> //创建组件 class Count extends React.Component{ 
      /* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1. constructor() 2. getDerivedStateFromProps 3. render() 4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发 1. getDerivedStateFromProps 2. shouldComponentUpdate() 3. render() 4. getSnapshotBeforeUpdate 5. componentDidUpdate() 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发 1. componentWillUnmount() =====> 常用 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息 */ //构造器 constructor(props){ 
      console.log('Count---constructor'); super(props) //初始化状态 this.state = { 
     count:0} } //加1按钮的回调 add = ()=>{ 
      //获取原状态 const { 
     count} = this.state //更新状态 this.setState({ 
     count:count+1}) } //卸载组件按钮的回调 death = ()=>{ 
      ReactDOM.unmountComponentAtNode(document.getElementById('test')) } //强制更新按钮的回调 force = ()=>{ 
      this.forceUpdate() } //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps static getDerivedStateFromProps(props,state){ 
      console.log('getDerivedStateFromProps',props,state); return null } //在更新之前获取快照 getSnapshotBeforeUpdate(){ 
      console.log('getSnapshotBeforeUpdate'); return 'atguigu' } //组件挂载完毕的钩子 componentDidMount(){ 
      console.log('Count---componentDidMount'); } //组件将要卸载的钩子 componentWillUnmount(){ 
      console.log('Count---componentWillUnmount'); } //控制组件更新的“阀门” shouldComponentUpdate(){ 
      console.log('Count---shouldComponentUpdate'); return true } //组件更新完毕的钩子 componentDidUpdate(preProps,preState,snapshotValue){ 
      console.log('Count---componentDidUpdate',preProps,preState,snapshotValue); } render(){ 
      console.log('Count---render'); const { 
     count} = this.state return( <div> <h2>当前求和为：{ 
     count}</h2> <button onClick={ 
     this.add}>点我+1</button> <button onClick={ 
     this.death}>卸载组件</button> <button onClick={ 
     this.force}>不更改任何状态中的数据，强制更新一下</button> </div> ) } } //渲染组件 ReactDOM.render(<Count count={ 
     199}/>,document.getElementById('test')) </script>

5.4、getSnapShotBeforeUpdate的使用场景

需求：滚动框内每隔一秒新增一条新闻数据，内容溢出时可滚动。当下拉到某一条新闻数据时，不会因为新增数据发生位置滚动。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4_getSnapShotBeforeUpdate的使用场景</title> <style> .list{ 
      width: 200px; height: 150px; background-color: skyblue; overflow: auto; } .news{ 
      height: 30px; } </style> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/17.0.1/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script> <!-- 引入babel，用于将jsx转为js --> <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type="text/babel"> class NewsList extends React.Component{ 
      state = { 
     newsArr:[]} componentDidMount(){ 
      setInterval(() => { 
      //获取原状态 const { 
     newsArr} = this.state //模拟一条新闻 const news = '新闻'+ (newsArr.length+1) //更新状态 this.setState({ 
     newsArr:[news,...newsArr]}) }, 1000); } getSnapshotBeforeUpdate(){ 
      // 获取到更新前的滚动高度 return this.refs.list.scrollHeight } componentDidUpdate(preProps,preState,height){ 
      // 最新的滚动高度 - 上一次的高度 = 单条新增数据的高度 // scrollTop 内容未溢出时为0  this.refs.list.scrollTop += this.refs.list.scrollHeight - height } render(){ 
      return( <div className="list" ref="list"> { 
      this.state.newsArr.map((n,index)=>{ 
      return <div key={ 
     index} className="news">{ 
     n}</div> }) } </div> ) } } ReactDOM.render(<NewsList/>,document.getElementById('test')) </script> </body> </html>

5.5、新、旧生命周期变化

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

2、getSnapshotBeforeUpdate：在更新之前获取快照（获取更新前数据）；

6、Diff算法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>key的作用</title> </head> <body> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入react-dom --> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!-- 引入babel --> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> /* 经典面试题: 1). react/vue中的key有什么作用？（key的内部原理是什么？） 2). 为什么遍历列表时，key最好不要用index? 1. 虚拟DOM中key的作用： 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下： a. 旧虚拟DOM中找到了与新虚拟DOM相同的key： (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM b. 旧虚拟DOM中未找到与新虚拟DOM相同的key 根据数据创建新的真实DOM，随后渲染到到页面 2. 用index作为key可能会引发的问题： 1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 2. 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。 3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作， 仅用于渲染列表用于展示，使用index作为key是没有问题的。 3. 开发中如何选择key?: 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 2.如果确定只是简单的展示数据，用index也是可以的。 */ /* 慢动作回放----使用index索引值作为key 初始数据： {id:1,name:'小张',age:18}, {id:2,name:'小李',age:19}, 初始的虚拟DOM： <li key=0>小张---18<input type="text"/></li> <li key=1>小李---19<input type="text"/></li> 更新后的数据： {id:3,name:'小王',age:20}, {id:1,name:'小张',age:18}, {id:2,name:'小李',age:19}, 更新数据后的虚拟DOM： <li key=0>小王---20<input type="text"/></li> <li key=1>小张---18<input type="text"/></li> <li key=2>小李---19<input type="text"/></li> ----------------------------------------------------------------- 慢动作回放----使用id唯一标识作为key 初始数据： {id:1,name:'小张',age:18}, {id:2,name:'小李',age:19}, 初始的虚拟DOM： <li key=1>小张---18<input type="text"/></li> <li key=2>小李---19<input type="text"/></li> 更新后的数据： {id:3,name:'小王',age:20}, {id:1,name:'小张',age:18}, {id:2,name:'小李',age:19}, 更新数据后的虚拟DOM： <li key=3>小王---20<input type="text"/></li> <li key=1>小张---18<input type="text"/></li> <li key=2>小李---19<input type="text"/></li> */ class Person extends React.Component{ 
      state = { 
      persons:[ { 
     id:1,name:'小张',age:18}, { 
     id:2,name:'小李',age:19}, ] } add = ()=>{ 
      const { 
     persons} = this.state const p = { 
     id:persons.length+1,name:'小王',age:20} this.setState({ 
     persons:[p,...persons]}) } render(){ 
      return ( <div> <h2>展示人员信息</h2> <button onClick={ 
     this.add}>添加一个小王</button> <h3>使用index（索引值）作为key</h3> <ul> { 
      this.state.persons.map((personObj,index)=>{ 
      return <li key={ 
     index}>{ 
     personObj.name}---{ 
     personObj.age}<input type="text"/></li> }) } </ul> <hr/> <hr/> <h3>使用id（数据的唯一标识）作为key</h3> <ul> { 
      this.state.persons.map((personObj)=>{ 
      return <li key={ 
     personObj.id}>{ 
     personObj.name}---{ 
     personObj.age}<input type="text"/></li> }) } </ul> </div> ) } } ReactDOM.render(<Person/>,document.getElementById('test')) </script> </body> </html>

7、额外知识拓展

7.1、类的基本知识

<script type="text/javascript" > /* 总结： 1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。 2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。 3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。 */ //创建一个Person类 class Person { 
      //构造器方法 constructor(name,age){ 
      //构造器中的this是谁？—— 类的实例对象 this.name = name this.age = age } //一般方法 speak(){ 
      //speak方法放在了哪里？——类的原型对象上，供实例使用 //通过Person实例调用speak时，speak中的this就是Person实例 console.log(`我叫${ 
       this.name}，我年龄是${ 
       this.age}`); } } //创建一个Student类，继承于Person类 class Student extends Person { 
      constructor(name,age,grade){ 
      super(name,age) this.grade = grade this.school = '尚硅谷' } //重写从父类继承过来的方法 speak(){ 
      console.log(`我叫${ 
       this.name}，我年龄是${ 
       this.age},我读的是${ 
       this.grade}年级`); this.study() } study(){ 
      //study方法放在了哪里？——类的原型对象上，供实例使用 //通过Student实例调用study时，study中的this就是Student实例 console.log('我很努力的学习'); } } const student = new Student('张三',9, 3) console.log(student); student.speak() class Car { 
      constructor(name,price){ 
      this.name = name this.price = price // this.wheel = 4 } //类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1 a = 1 wheel = 4 static demo = 100 } const c1 = new Car('奔驰c63',199) console.log(c1); console.log(Car.demo); </script>

7.2、原生事件绑定

<body> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <button onclick="demo()">按钮3</button> <script type="text/javascript" > const btn1 = document.getElementById('btn1') btn1.addEventListener('click',()=>{ 
      alert('按钮1被点击了') }) const btn2 = document.getElementById('btn2') btn2.onclick = ()=>{ 
      alert('按钮2被点击了') } function demo(){ 
      alert('按钮3被点击了') } </script> </body>

7.3、展开运算符

<script type="text/javascript" > let arr1 = [1,3,5,7,9] let arr2 = [2,4,6,8,10] console.log(...arr1); //展开一个数组 let arr3 = [...arr1,...arr2]//连接数组 //在函数中使用 function sum(...numbers){ 
      return numbers.reduce((preValue,currentValue)=>{ 
      return preValue + currentValue }) } console.log(sum(1,2,3,4)); //构造字面量对象时使用展开语法 let person = { 
     name:'tom',age:18} let person2 = { 
     ...person} //console.log(...person); //报错，展开运算符不能展开对象 person.name = 'jerry' console.log(person2); console.log(person); //合并 let person3 = { 
     ...person,name:'jack',address:"地球"} console.log(person3); </script> // 打印如下： // 1 3 5 7 9 // 1 3 5 7 9 2 4 6 8 10 // 10 // {name: "tom", age: 18} // {name: "jerry", age: 18} // {name: "jack", age: 18, address: "地球"}

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/103343.html

React基础入门（一）