1、Hello,Word

React干嘛的，有什么用可以去官网瞧瞧。

安装

react核心库

react操作dom的库

babel转义jsx语法

提供根节点

编写JSX

babel语法

image.png

2、JSX的语法规则

2-1、虚拟dom是什么类型的？

const VDOM = Hello,Word
console.log(VDOM instanceof Object)
console.log(VDOM)

image.png

其实JSX中虚拟dom就是个json对象，当然原生的dom节点其实也是对象

image.png

只不过相对于原生来说少了很多属性。

2-2、虚拟DOM使用变量

var hId = 't-h1';
var Txt = '变量文本';
var style = {color:'white',backgroundColor:'orange'}
const VDOM = (
    {Txt}
)
ReactDOM.render(VDOM,document.getElementById('app'))

image.png

注意：1、在虚拟dom中定义类名需要使用className
2、使用内联样式需要使用花括号把对象包裹起来
3、定义虚拟DOM不需要使用单引号，如果使用就会变成字符串了
4、虚拟DOM只能有一个根节点
5、虚拟DOM的节点定义规则：
5-1、首字母小写，如果为html中的同名标签，则渲染为同名元素，如果不是则直接渲染改标签，且会报错
5-2、首字母大写，则为React中的自定义组件

3、React组件

3-1、函数式组件

//注意这里需要大写首字母原因请看jsx语法规则
const data = ['Angulay', 'React', 'Vue'];
function Demo(abc) {
    console.log(this)
    return (
        
            自定义组件
            
                {data.map(item => {item})}
            
        
    )
}

ReactDOM.render(, document.getElementById('app'))

注意此处的函数中this并不是window,也不是React实例,因为在babel中转义会添加严格模式use strict严格模式下，禁止函数内this指向window

3-2、类式组件

class HelloMessage extends React.Component{
    render(){
        return 类式组件的定义
    }
}
ReactDOM.render(,document.getElementById('app'))

类式组件定义规则：1、必须继承自React.Component这个类
2、必须含有一个render方法，且必须有一个返回值
3、类中可以不用constructor方法

当ReactDOM.render一个类组件发生了什么？

1、React解析组件标签，找到了自定义组件。
2、发现自定义组件是类定义，随后new出一个实例出来，并且调用原形上render方法
3、讲原形上render返回的虚拟dom返回在真是dom上

4、状态 State

我们先看下类式组件的this到底有些什么东西？

class MyWeatch extends React.Component {
    render() {
        console.log(this);
        return (
            
                Hello,Word
            
        )
    }
}
ReactDOM.render(, document.getElementById('app'))

image.png

state已被挂在在组件的实例对象上

4-1、案例使用state进行操作

class MyWeacth extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      isHot:false
    }
  }
  render(){
    const {isHot}  = this.state;
    return 今天天气很{isHot?'炎热':'凉爽'}
  }
}

注意：你必须使用构造器constructor,并且需要接受

4-2、使用事件处理调用函数

class Weatch extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      isHot:false
    }
  }
  render(){
    const {isHot}  = this.state;
    return 今天天气很{isHot?'炎热':'凉爽'}
  }
  handleHot(){
    console.log(this.state.isHot)
  }
}

注意：1、在React中监听事件我们使用原生的方法在标签上写入方法，并且是驼峰命名
2、如果你直接赋值原型函数，则该函数的this为undefined，所以必须是使用bind处理this指向

4-3、改变State的值

根据上述例子我们会发现直接更改state.isHot的值，虽然他的值确实被改变了，但是最终视图并没有被改变！

、、、
 handleHot(){
    console.log(this.state.isHot) 你会发现值确实被改变了
    this.state.isHot = !this.state.isHot
    
  }

在React中你不可以直接改变状态的值，你必须使用父类原型中的setState方法进行改变数据。

handleStatus() {
    this.setState({
        isHot: !this.state.isHot
    })
}

已经实现了功能，视图也更新了

4-4、疑问，setState是替换了state的整个对象，还是对象中的具体属性？

class HelloMessage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isHot: false,
            isTxt: '测试文字'
        }
    }

    render() {
        const { isHot, isTxt } = this.state
        return 测试啊{isHot ? '可以' : 'no no'}，案例：{isTxt}
    }

    handleStatus() {
        this.setState({
            isHot: !this.state.isHot
        })
      console.log(this.state)
    }
}

image.png

会发现setState只是改变了具体的某个属性，并没有对整个state的值进行赋值，它的操作类似于Object.assign(this.state,arguments)

4-5、疑问？对state进行更新，构造器`constructor`、`render`、`依赖的事件函数`他们会被调用么？调用多少次？

用代码说话

class HelloMessage extends React.Component {
    constructor(props) {
        console.log('constructor');
        super(props)
        this.state = {
            isHot: false,
            isTxt: '测试文字'
        }
    }

    render() {
        console.log('render');
        const { isHot, isTxt } = this.state
        return 测试啊{isHot ? '可以' : 'no no'}，案例：{isTxt}
    }

    handleStatus() {
        console.log('handleStatus');
        this.setState({
            isHot: !this.state.isHot
        })
    }
}

我们点击h1标签看看怎么打印的？

image.png

通过这次小案例我们就知道了：
1、构造器constructor只会在自定义组件第一次绑定的时候才会调用一次，除非你在多个地方使用了该自定义组件
2、render函数会在调用setState/props改变，父组件更新，时会调用
3、事件处理函数当然只会在你每次触发的时候在调用。

4-6、精简写法

首先我们先复习下普通的类的写法

class Person{
  name="人";
  age = 18;
  constructor(){
    this.eye = 2;
  }
  handle = ()=>{
    console.log(this)
  }
  handleProto(){
    
  }
}

请问下？name、age、handle函数他们被放在哪了？

image.png

他们被放在了实例的自身属性上！！不是原型上，所以React的精简写法来了！

class HelloMessage extends React.Component {
    state = { isHot: false, }

    render() {
        const { isHot } = this.state
        return 测试啊{isHot?'1':'2'}
    }

    handleStatus = () => {
        this.setState({
            isHot: !this.state.isHot
        })
    }
}

5、Prop传值

想象一个场景，如果我们自己封装了一个自定义组件，但是组件里面的用到的数据有些是需要用户传进来的，但是不可能让用户自己修改里面的代码吧？所以我们引入一个概念Props

class HelloMessage extends React.Component {
    render() {
        const { name, age } = this.props;
        return 姓名：{name},年龄：{age}
    }
}

ReactDOM.render(, document.getElementById('app'))

5-1、更简便的传值

利用展开运算符...进行解构对象，我们知道大部分的数据我们都是后台传过来的，所以我们可以在外部定义一个json对象模拟数据

class HelloMessage extends React.Component {
    render() {
        const { name, age } = this.props;
        return 姓名：{name},年龄：{age}
    }
}
let p = { name: 'tom', age: 18 }
ReactDOM.render(, document.getElementById('app'))

5-2、Props的规则验证

例如上述案例，我们可以知道，这用户传值随心所欲，如我不传姓名，或者姓名我传数字怎么办？所以我们需要限制他的传值类型

image.png

在老版本上React对象上挂载了一个PropTypes对象，不过现在已被移除了，移到一个单独的包中

我们引入csdn单独的PropTypes的包

我们看下PropTypes身上到底有些什么东西

console.log(PropTypes)

PropTypes身上的属性

5-2-1、PropTypes的使用规则

你需要在自定义组件的类名添加一个静态属性propTypes注意是小写的p

class MyComponent extends React.Component{
  static propTypes = {
    name:PropType.string,
    age:PropType.number
  }
}

这是基本的验证规则
props属性必传isRequired

static propTypes = {
  name:PropType.string.isRequired, //必传
  age:PropType.number
}

props之属性默认值
你需要给自定义组件添加静态的defaultProps属性

static defaultProps = {
  name:'Tom'
}

props是只读的，单向数据流

5-3、如果使用构造器`constructor`，那么我不接收`pops`,会怎么样

官方案例
、、、
{
  constructor(props){
    super(props)
    console.log(this.props)
  }
}
//不接收props
{
  constructor(){
    super()
    console.log(this.props)//undefined
  }
}

如果你需要在构造器constructor中操作props那么你就需要把props传给分类

6、Refs

获取原生dom对象，和vue中的用法是一致的，在虚拟节点上添加ref属性

6-1、字符串设置refs `即将废弃`

为什么会被废弃？过时 API：String 类型的 Refs

handleClick = ()=>{
  console.log(this.refs)
}
render(){
  return Refs使用
}

6-2、回调形式refs

也就是在 ref赋值的时候写入一个函数

6-2-1、内联回调函数

render(){
  return this.ish = curr}>Refs的使用
}

但是注意的是：
1、内联回调函数不会往refs对象中添加属性，在这里你相当于在实例身上添加了一个ish的属性
2、内联回调形式的refs会在组件更新状态的时候调用两次，一次的参数值为null第二次才是真正的节点

6-2-2、赋值一个函数的形式

saveH = (curr)=>{
  this.ish = curr
}
render(){
  return Refs的使用
}

这个可以避免内联回调的两个缺点，但是，他又会增加组件实例上的属性过多且很杂。所以一般我们还是采用内联形式的方式

6-3、使用最新的API createRef

$refs = React.createRef()
handleClick = ()=>{
    console.log(this.$refs);
}
render() {

    return 

        侧是是是
    
}

遗憾是使用createRef创建出来的属性只能是"专人专用",也就是说如果还有第二个节点需要使用ref那么又得重新使用createRef创建一个新的属性出来

7、高阶函数/函数柯里化

什么是高阶函数？
1、如果一个函数的参数是一个函数那么该函数就是高阶函数
2、如果一个函数返回了一个函数，那么该函数也是高阶函数

闭包、Promise、setTimeOut、Array.map、、、等等

7-1、在React中使用高阶函数

想象一个场景，如果一个虚拟dom绑定的事件做的事都几乎一样，那么我们没必要定义多个函数，排除内联函数(箭头函数)

handleClick = (type)=>{
  ****
console.log(type)
switch(type){、、、}
}
render(){
  return (
    
      测试1
      测试2
      测试3
     
  )
}

如果我们直接直接这样，就相当于在render的时候React自己帮我们调用了这个函数，后面就不会响应我们的点击事件，解决办法，返回一个函数

handleClick = (type)=>{
  return (event)=>{
    
  }
}
render(){
  return (
    
      测试1
      测试2
      测试3
     
  )
}

7-2、函数柯里化

含义：通过函数调用继续返回的函数的方式，实现多次接收参数最后统一处理的函数编码方式

不用柯里化求三个值得和
function sum(a,b,c){return a+b+c}
柯里化
function sum(a){
   return (b)=>{
    return (c)=>{
       return a+b+c
     }
   }
}

8、React生命周期（旧）

image.png

1、组件挂载前=>componentWillMount
2、组件挂载后=>componentDidMount
3、组件卸载前=>componentWillUnmount
4、组件更新前=>componentWillUpdate
5、组件更新后=>componentDidUpdate
6、组件更新阀门=>shouldComponentUpdate
7、父组件render后并改变了子组件props监听第二次变化=>componentWillReceiveProps

知识点：
- 主动卸载一个组件ReactDOM.unmountComponentAtNode(节点)
- 在生命周期中你会发现带有Will都是触发前，带有Did都是触发完成后

8-1 最新生命周期

image.png

我们知道react是要经历三个阶段挂载、更新、卸载

挂载：
constructor(初始化)
getDerivedStateFromProps
render
componentDidMount
更新：
getDerivedStateFromProps
shouldComponentUpdate
getSnapshotBeforeUpdate
componentDidUpdate
卸载
componentWillUnMount

9、React脚手架

10、React路由

React的路由：react-router(比较综合可以给react native使用)、react-router-dom(web端)

React的基础入门学习

1、Hello,Word

安装

2、JSX的语法规则

2-1、虚拟dom是什么类型的？

Hello,Word

2-2、虚拟DOM使用变量

{Txt}

3、React组件

3-1、函数式组件

自定义组件

3-2、类式组件

类式组件的定义

4、状态 State

4-1、案例使用state进行操作

今天天气很{isHot?'炎热':'凉爽'}

4-2、使用事件处理调用函数

今天天气很{isHot?'炎热':'凉爽'}

4-3、改变State的值

4-4、疑问，setState是替换了state的整个对象，还是对象中的具体属性？

测试啊{isHot ? '可以' : 'no no'}，案例：{isTxt}

4-5、疑问？对state进行更新，构造器constructor、render、依赖的事件函数他们会被调用么？调用多少次？

测试啊{isHot ? '可以' : 'no no'}，案例：{isTxt}

4-6、精简写法

测试啊{isHot?'1':'2'}

5、Prop传值

姓名：{name},年龄：{age}

5-1、更简便的传值

姓名：{name},年龄：{age}

5-2、Props的规则验证

5-2-1、PropTypes的使用规则

5-3、如果使用构造器constructor，那么我不接收pops,会怎么样

6、Refs

6-1、字符串设置refs 即将废弃

Refs使用

6-2、回调形式refs

6-2-1、内联回调函数

this.ish = curr}>Refs的使用

6-2-2、赋值一个函数的形式

Refs的使用

6-3、使用最新的API createRef

7、高阶函数/函数柯里化

7-1、在React中使用高阶函数

7-2、函数柯里化

8、React生命周期（旧）

8-1 最新生命周期

9、React脚手架

10、React路由

你可能感兴趣的:(React的基础入门学习)

4-5、疑问？对state进行更新，构造器`constructor`、`render`、`依赖的事件函数`他们会被调用么？调用多少次？

5-3、如果使用构造器`constructor`，那么我不接收`pops`,会怎么样

6-1、字符串设置refs `即将废弃`