为了账号安全,请及时绑定邮箱和手机立即绑定
  • 创建Context对象

    把想要使用Context数据的节点换成<定义的文件名.Provider></定义的文件名.Provider>

    查看全部
    0 采集 收起 来源:Context 编码

    2023-03-31

  • Context 全局数据

    查看全部
    0 采集 收起 来源:Context 介绍

    2023-03-31

  • 由上而下的数据流 单向数据流 所以数据处理放在父组件中
    子组件向父组件传值:this.props.方法名(值)

    查看全部
  • 受控组件

    http://img1.sycdn.imooc.com//64265b900001df6907550851.jpg

    非受控组件 将真实数据保存在dom中 因此在使用非受控组件时 更容易同时集成React和非React的代码 如果想要快速而随性、并且减少代码量 可以使用非受控组价 否则需要使用受控组件
    http://img1.sycdn.imooc.com//64265b9e00011a0607260694.jpg

    查看全部
    0 采集 收起 来源:React 表单

    2023-03-31

  • 示例 使用到了某些生命周期
    http://img1.sycdn.imooc.com//6426570c00018fbe06130704.jpg

    查看全部
    0 采集 收起 来源:React 生命周期

    2023-03-31

  • 组件的生命周期:
    组件初始化、组件更新、组件卸载

    1. constructor 数据的初始化


    2. componentWillMount 在挂载前也就是render之前被调用


    3. getDerivedStateFromProps 从props中获取到state


    4. render 插入jsx生成的dom结构


    5. componentDidMount 组件挂载后立即调用 通常在这调用ajax请求


    6. getDerivedStateFromProps


    7. shouldComponentUpdate 到新的props或者state时都会调用,通过返回true或者false告知组件更新与否


    8. render


    9. getSnapshotBeforeUpdate


    10. componentDidUpdate 组件更新结束后触发


    11. componentWillUnmount


    查看全部
    0 采集 收起 来源:React 生命周期

    2023-03-31

  • 点击事件(两种方式)

    onClick={this.handleClick.bind(this)}

    onClick={() => {this.handleClick()}}

    http://img1.sycdn.imooc.com//64265285000109f307490574.jpg

    查看全部
    0 采集 收起 来源:React 状态

    2023-03-31

  • State
    this.setState 更改State中的值


    constructor

    这是ES6对类(Class)的默认方法,一般用于数据初始化,通过 new 命令生成对象实例时自动调用该方法。并且,该方法是类中必须有的,如果没有显示定义,则会默认添加。

    super

    继承它的父级

    子类必须在constructor() 中调用 super() ,否则新建实例时会报错


    查看全部
    0 采集 收起 来源:React 状态

    2023-03-31

  • Props

    父组件向子组件传输数据:


    子组件接收父组件的数据(props):

    子组件接收的值是只读的(要像纯函数一样使用props参数)

    在一个函数内 不改变接收的参数称为纯函数

    查看全部
    0 采集 收起 来源:React 属性

    2023-03-31

  • JSX被babel编译过
    JSX只是一种语法糖 是React.createElement的语法糖
    (简单明了易懂)

    查看全部
    0 采集 收起 来源:JSX第二部分

    2023-03-31

  • jsx

    是JavaScript的一种语法扩展(内部实现的)
    语法是{} 可写入表达式
    写入样式 className
    htmlFor  HTML 标签的 for 属性 规定 label 与哪个表单元素绑定

    查看全部
    0 采集 收起 来源:JSX第一部分

    2023-03-31

  • Render方法 代表组件渲染出来的结果
    ReactDom.render方法 可以把写好的组件挂载在dom节点上

    查看全部
  • npm install create-react-app -g
    create-react-app project-name

    查看全部
  • 声明式的写法;组件化;一处学习,随处编写

    查看全部
    0 采集 收起 来源:React 简介

    2023-03-31

  • 状态提升

    单项数据流

    查看全部
  • 组件初始化:

    组件更新

    组件卸载

    查看全部
    0 采集 收起 来源:React 生命周期

    2022-11-03

  • React属性
    class Namecard extends React.Component {
        render(){
          const { name, number, isHuman, tags } = this.props
          return(
            <div>
              <h4>{name}</h4>
              <ul>
               <li>电话:1234567890</li>
               <li>{ isHuman ? '人类' :'外星生物'}</li>
               <hr/>
               <p>
               { tags.map((tag, index) => (
                   <span> {tag}</span>
               ))}
               </p>
              </ul>
            </div>
          )
        }
    }
    export default NameCard
    查看全部
    0 采集 收起 来源:React 属性

    2022-11-01

  • JSX:JavaScript的语法扩展,也为Js的语法糖,可以使用{}内嵌任何JavaScript表达式,Jsx属性
    class welcom extends React.component {
        render(){
          const todolist = ['Learn React', 'Learn Redux']
          return(
              <div>
                  <h1>Hello React</h1>
                  <ul> 
                  {
                  todolist.map(item =>
                  <li>{item}</li>
                  )
                  }
                  </ul>
              </div>
          )
        }
    }
        export default Welcome
    查看全部
    0 采集 收起 来源:JSX第一部分

    2022-11-01

  • State(状态)

    组件内部的数据 可以动态改变

    查看全部
    0 采集 收起 来源:React 状态

    2022-08-09

  • Props(属性)

    组件像一个函数一样,接受特定的输入(props),产出特定的输出(React elements)

    V = f(props)

    查看全部
    0 采集 收起 来源:React 属性

    2022-08-09

  • Props属性是由上到下单向传递的

    Context提供了在组件中共享此类值的方法,设计目的是共享那些对于组件来说全局的数据

    不要仅仅为了避免在几个层级下的组件传递props而使用context

    查看全部
    0 采集 收起 来源:Context 介绍

    2022-08-04

  • JSX是一种语法糖

    查看全部
    0 采集 收起 来源:JSX第二部分

    2022-07-26

  • JSX是一种JavaScript语法扩展

    用花括号,在其中添加任意的表达式

    属性与html属性非常一直,不同点在于类用className,for改为htmlFor

    查看全部
    0 采集 收起 来源:JSX第一部分

    2022-07-26

  • React  用于创建用户界面的JavaScript库

    声明式的写法

    组件化

    一次学习,随处编写

    查看全部
    0 采集 收起 来源:React 简介

    2022-07-25

  • 在 react 中,创建某一个响应式数据可以使用在 this.state = {} 中添加属性的方法,这一点和 Vue 有明显的不同,Vue 是在 data 属性中添加响应式数据;

     class LikeBtn extends React.component { 
         constructor(props) {
         super(props)
         this.state = {
             likes: 0
         }
         }
    }


    在 react 中,添加事件和事件监听函数:

    例如:点击事件:  onclick、事件监听函数: increaseLikes

    使用驼峰命名原生 JS 事件onClick

    并在 {} 中添加 this.increaseLikes


    第一种写法:

    increaseLikes() {
        // ...
    }
    render() {
        return (
            <button onClick={this.increaseLikes}> like+ </button>
        )
    }


    第二种写法:

    increaseLikes() {
        // ...
    }
    render() {
        return (
            <button onClick={() => {this.increaseLikes()}}> like+ </button>
            { this.state.likes }
        )
    }


    上述两种写法,在 JSX 种使用箭头函数可以省略在组件 constructor  中在 this.increaseLikes 上绑定 this 的步骤;

    如果不使用箭头函数,必须要在组件 constructor  中在 this.increaseLikes 上绑定 this,否则在事件监听函数中 this undefined


    在事件监听函数中更改 state 里的数据时,需要使用 this.setState() 方法,传入对象,这里的对象就是 state 对象,用更改对象属性的方法更改 state 中的数据;

    查看全部
    0 采集 收起 来源:React 状态

    2022-05-04

  • 1111

    查看全部
  • 5555

    查看全部
    0 采集 收起 来源:Context 介绍

    2022-05-03

  • yyy

    查看全部
    0 采集 收起 来源:Context 介绍

    2022-05-03

  • 11111

    查看全部
    0 采集 收起 来源:Context 介绍

    2022-05-03

首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
了解基本的 Javascript(ES6)语法
老师告诉你能学到什么?
1、React本地开发环境的搭建 2、React组件 和 JSX 3、React的属性(props)和状态(state) 4、React组件的生命周期 5、React表单- 非受控表单和受控表单 6、React开发思想 - 状态提升和单向数据流 7、React16新增特性 Context

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!