第一章节：基础部分
（本文是学习尚硅谷前端react课程的学习笔记）
1.引入部分
<!-- 这一部分主要讲述了，不使用脚手架引入React的步骤-->
<!-- 首先是，引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 第二，引入react-dom，这个库也叫作React扩展库，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 第三，引入babel，React中使用的不是js而jsx，而babel用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
/* 需要注意，此处一定要写babel，平时会不写，但使用React，type="text/babel"是必须的 */
<script type="text/babel" >
//在标签之间可以写入jsx语句这里和js一样，主要分为两个步骤：创建虚拟dom，并把它渲染到页面上
//1.创建虚拟DOM
// 此处一定不要写引号，因为不是字符串。但可以写括号，用于标识
const VDOM = <h1>Hello,React</h1>
//2.渲染虚拟DOM到页面
//React的目的是尽可能少的使用document打点调用，但是像下面这次document打点调用是不可省略的
ReactDOM.render(VDOM,document.getElementById('test'))
</script>2.创建虚拟dom的两种方式
/* 第一种，使用jsx创建*/
<script type="text/babel" >
//1.创建虚拟DOM
const VDOM = (
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>/* 第二种，使用js方式。需要注意下面没有使用babel，而是使用javascript。如果不写默认是javascript*/
<script type="text/javascript" >
//1.创建虚拟DOM
const VDOM = React.createElement(
'h1',{id:'title'},
React.createElement('span',{},'Hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>/*第三，区分虚拟dom和真实dom*/
<script type="text/babel" >
//以下是虚拟dom
//1.创建虚拟DOM
const VDOM = (
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
//以下是真实dom
const TDOM = document.getElementById('demo')
console.log('虚拟DOM',VDOM);
console.log('真实DOM',TDOM);
//debugger是一种使用代码来打断点的语句
debugger;
// console.log(typeof VDOM);
// console.log(VDOM instanceof Object);
/*
关于虚拟DOM：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
*/
</script>3.jsx的基础语法规则
<script type="text/babel" >
//1.创建虚拟DOM
const VDOM = (
<div>
//className和class作用一样，他是react为我们提供的封装的，兼容性更好
//id那块有一个{}，他表示里面写的是一个jsx语句
<h2 className="title" id={myId.toLowerCase()}>
//这里写的是一个{{}}双括号，外层表示里面是jsx语句，内层表示封装了一个对象
<span style={{color:'white',fontSize:'29px'}}>
//在标签之间的括号也表示里面写的是js表达式
{myData.toLowerCase()}
</span>
</h2>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
/*
还需要注意：
1.标签中混入JS表达式时要用{}。
2.内联样式，要用style={{key:value}}的形式去写。
3.只允许有一个根标签
4.标签首字母需要注意
若标签小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
*/
</script>4.区分js语句和js表达式
/*
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). dosomething(1)
(4). arr.map()
//map方法经常用于遍历数组显示到页面上，如果数值总得每一项有id的话
//那么每一项必须指定的key就用这个id，而不是自己写的index
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
*/
//这的用的index是map中可以拿到的,map尅闯入三个参数
//map((item,index,array)=>{})对每一项进行操作，返回的是经过处理之后的数组
//every((item,index,array)=>{})返回的是一个布尔值，全真为真，有一个是假那么就返回假
//some((item,index,array)=>{})返回的是一个布尔值，全假为假，有一个是真那么就返回真
//filter((item,index,array)=>{})对每一项进行操作，把那些返回值为true的项合并成一个数组，返回
//forEach((item,index,array)=>{})类似于for循环
//reduce((pre,cur,index,array)=>{})常用于求和
{//react里面用于输出使用map最多
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}5.React里面定义组件的两种方式（函数式组件和类式组件）
//第一，函数式组件
//通常情况下，function时会产生this的，箭头函数不产生this
//但此处的this是undefined，因为babel编译后开启了严格模式
function MyComponent(){
console.log(this);
return <h2>函数式组件(多用于简单组件的定义)</h2>
}
//第二.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/* render之后
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*///第一，创建类式组件（这个是重点，以后用的最多）
class MyComponent extends React.Component {
render(){
//render是放在MyComponent的原型对象上，供实例使用。
//render中的this是MyComponent的实例对象 ，也就是MyComponent组件实例对象。
return <h2>类定义的组件(多用于复杂组件定义)</h2>
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/* render之后
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/6.React三大组件-State
//构造器调用 ———— 1次
constructor(props){//可以省略
super(props)//这个是必须有的
this.state = {...}
//解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用1+n次 1是初始化的那次 n是状态更新的次数
render(){
const {...} = this.state
return <h1 onClick={this.changeWeather}>xxxxx</h1>
}
//changeWeather调用几次？ ———— 点几次调几次
method11(){
//method11放在 Weather的原型对象上，供实例使用
//由于method11是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以method11中的this为undefined
const isHot = this.state.isHot
//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
//需要注意state修改必须setState一个新的对象
//state不可直接更改
//this.state.isHot = !isHot //这是错误的写法
}
}
简写
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})
}
}7.React三大组件-props
首先需要引入 <script type="text/javascript" src="../js/prop-types.js"></script>
类式组件
class Person extends React.Component{
constructor(props){
//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
super(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(){
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'))函数式组件
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,
sex:PropTypes.string,
age:PropTypes.number,
}
//指定默认标签属性值
Person.defaultProps = {
sex:'男',
age:18
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))8.React三大组件-refs
三种方式创建
第一种：字符串形式的ref（不推荐，快被废弃了）
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>第二种：回调形式的ref（这种方法用的很多，返回的是一个ref对象，通过解构赋值可以拿到value）
const {value} = this.input1
<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>第三种：createRef创建ref容器（这个使用了内部api来创建ref）
myRef = React.createRef()
//展示左侧输入框的数据
showData = ()=>{
alert(this.myRef.current.value);
}
render(){
return(
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
</div>
)
}
注意：个人认为input框经常结合 ref来使用，用于组件之间的通信（input和button）。它不像vue有v-model可以实现双向通信。
要尽可能的避免ref的使用，使用event来代替，（event.target.value）（this.ref的名字.current.value）
9.React的事件处理
(1).通过onXxx属性指定事件处理函数(注意大小写)//也就是说以前是onclick现在是onClick，就是React里面封装了一层
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref
//需要注意不要过度使用ref，组件之间进行交互在使用ref
//普通的输出什么的，直接使用event就可以了
//展示左侧输入框的数据
showData = (event)=>{
console.log(event.target);
alert(this.myRef.current.value);
}
//展示右侧输入框的数据
showData2 = (event)=>{
alert(event.target.value);
}
render(){
return(
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}10.受控组件和非受控组件
我的理解就是和上面类似
非受控组件：使用ref的
受控组件：使用event.target.value
11.高阶函数与函数柯里化
高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。（要么接受的参数是函数，要么返回的是一个函数）
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
简而言之就是，我们在某个控件中绑定的是一个函数（一个方法），而不是一个执行完了的值。我们需要触发它，他才会执行，而不是页面加载他就执行了。
使用柯里化：在onChange传入this.方法名。然后在组件内定义方法，返回一个方法.
不使用柯里化：直接在onChange传入一个回调函数。
12.组件的生命周期
旧版：
挂载时：构造->将要挂载->render->已经挂载
更新时（三条线）：
父组件收到参数->组件应该更新->组件将要更新->render->组件已经更新
setState触发的状态变化->组件应该更新->组件将要更新->render->组件已经更新
forceUpdate强制更新>组件将要更新->render->组件已经更新
卸载后
新版：
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. getDerivedStateFromProps //从参数获取派生状态
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发（和旧版本一样有三条线路，父组件接收擦护，setState，forceUpdate强制更新）
1. getDerivedStateFromProps
2. shouldComponentUpdate()//这里是一个阀门
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
13.diff算法
1. 虚拟DOM中key的作用： 1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下： a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：（虚拟dom进行比较，然后操作真实dom。key匹配上了，值相同不修改，值不同则修改。没匹配上key直接添加。） (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM (2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM b. 旧虚拟DOM中未找到与新虚拟DOM相同的key 根据数据创建新的真实DOM，随后渲染到到页面 2. 用index作为key可能会引发的问题：（也就是说，原来key是1,2,3的因为添加了一个变成了2,3,4这样会触发多次diff算法） 1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 2. 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。 3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作， 仅用于渲染列表用于展示，使用index作为key是没有问题的。 3. 开发中如何选择key?:（所以说如果数据中有id则最好使用数据中的id） 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 2.如果确定只是简单的展示数据，用index也是可以的。
扫一扫
2165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
