React的基础入门学习

1、Hello,Word

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

安装

react核心库
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
react操作dom的库
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
babel转义jsx语法
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

提供根节点

<div id="app"></div>

编写JSX

babel语法
<script type="text/babel">
//创建虚拟dom
const VDOM = <h1>Hello,Word</h1>
ReactDOM.render(VDOM,document.getElementById('app'))
</script>
image.png

2、JSX的语法规则

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

const VDOM = <h1>Hello,Word</h1>
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 = (
    <h1 id={hId} style={style}>{Txt}</h1>
)
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 (
        <div>
            <h1>自定义组件</h1>
            <ul>
                {data.map(item => <li key={item}>{item}</li>)}
            </ul>
        </div>
    )
}

ReactDOM.render(<Demo />, document.getElementById('app'))

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

3-2、类式组件

class HelloMessage extends React.Component{
    render(){
        return <h1>类式组件的定义</h1>
    }
}
ReactDOM.render(<HelloMessage />,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 (
            <div className="test">
                Hello,Word
            </div>
        )
    }
}
ReactDOM.render(<MyWeatch />, 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 <h1>今天天气很{isHot?'炎热':'凉爽'}</h1>
  }
}

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

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

class Weatch extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      isHot:false
    }
  }
  render(){
    const {isHot}  = this.state;
    return <h1 onClick={this.handleHot.bind(this)}>今天天气很{isHot?'炎热':'凉爽'}</h1>
  }
  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 <h1 onClick={this.handleStatus.bind(this)}>测试啊{isHot ? '可以' : 'no no'}，案例：{isTxt}</h1>
    }

    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 <h1 onClick={this.handleStatus.bind(this)}>测试啊{isHot ? '可以' : 'no no'}，案例：{isTxt}</h1>
    }

    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 <h1 onClick={this.handleStatus}>测试啊{isHot?'1':'2'}</h1>
    }

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

5、Prop传值

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

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

ReactDOM.render(<HelloMessage name="tom" age="18" />, document.getElementById('app'))

5-1、更简便的传值

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

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

5-2、Props的规则验证

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


image.png

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

我们引入csdn单独的PropTypes的包

<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

我们看下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 <h1 ref="ish" onClick={this.handleClick}>Refs使用</h1>
}

6-2、回调形式refs

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

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

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

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

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

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

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

6-3、使用最新的API createRef

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

    return <div ref={this.$refs} onClick={this.handleClick}>

        侧是是是
    </div>
}

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

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

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

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

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

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

handleClick = (type)=>{
  ****
console.log(type)
switch(type){、、、}
}
render(){
  return (
    <div>
      <span onClick={this.handleClick('type1')}>测试1</span>
      <span onClick={this.handleClick('type2')}>测试2</span>
      <span onClick={this.handleClick('type3')}>测试3</span>
     </div>
  )
}

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

handleClick = (type)=>{
  return (event)=>{
    
  }
}
render(){
  return (
    <div>
      <span onClick={this.handleClick('type1')}>测试1</span>
      <span onClick={this.handleClick('type2')}>测试2</span>
      <span onClick={this.handleClick('type3')}>测试3</span>
     </div>
  )
}

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端)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,311评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,339评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,671评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,252评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,253评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,031评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,340评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,973评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,466评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,701评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,254评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2赞 345

推荐阅读更多精彩内容

  • react 学习笔记
    3. JSX JSX是对JavaScript语言的一个扩展语法， 用于生产React“元素”，建议在描述UI的时候...
    pixels阅读 2,806评论 0赞 24
  • Reactjs 入门综合教程 （上）
    按照惯例，先给ReactJS背书 React是一个Facebook开发的UI库，于2013年5月开源，并迅速的从最...
    艾伦先生阅读 3,222评论 1赞 12
  • React 官方文档翻译二
    It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,252评论 0赞 2
  • Entry to React
    原教程内容详见精益 React 学习指南，这只是我在学习过程中的一些阅读笔记，个人觉得该教程讲解深入浅出，比目前大...
    leonaxiong阅读 2,810评论 1赞 18