1. {}用来内嵌任何JS表达式
    JSX属性
    JS核心分为三大块:Es6DOMWindow
    BABEL编译器:可以在线编译html语法生成对应的react语法 **
    自定义组件第一个字母大写:用于区别普通的对象
    HTML被编译成了什么?
    它是一种语法糖--React.createElement()
    TeactElment对象
  2.  
  3. Props(属性)
    组件就像函数一样,接受特定的输入(props),产出特定的输出(React elements
    函数格式:V=f(props)

props

this.props包含由此组件的调用者定义的props。有关道具的介绍,请参阅组件和道具。

特别是,它this.props.children是一个特殊的prop,通常由JSX表达式中的子标签而不是标签本身定义。

  1.  
  2. 案例:【名片】安装 bootstrap
    npm install bootstrap --save
    在入口JS文件中直接引用 import 'bootstrap/dist/css/bootstrap.min.css'
    实列:
  1. import React from 'react'
    //使用JS函数的方式定义组件
    const NameCare=(props)=>{ 第一种
    const {name,number,isHuman,tags}=props
    return (
    <div className="alert alert-success">
    <h4 className="alert-heading">{name}</h4>
    <ul>
    <li>电话:{number}</li>
    <li>{isHuman?'人类':'外星生物'}</li>
    <hr/>
    <p>
    {tags.map((tag,index)=>(
    <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
    ))}
    </p>
    </ul>
    </div>
    )
    }
    /*class NameCare extends React.Component{第二种写法
    render() {
    //定义值
    const {name,number,isHuman,tags}=this.props
    return (
    <div className="alert alert-success">
    <h4 className="alert-heading">{name}</h4>
    <ul>
    <li>电话:{number}</li>
    <li>{isHuman?'人类':'外星生物'}</li>
    <hr/>
    <p>
    {tags.map((tag,index)=>(
    <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
    ))}
    </p>
  2.  
  3. </ul>
  4.  
  5. </div>
    )
    }
    }*/
    export default NameCare
  1. import NameCare from './Care/NameCare'//在页面中引入组件
  1. const tags=['恐龙','足球小子']//定义数组
    显示值
  1. <NameCare
    name={'Viking'}
    number={123456789011}
    isHuman
    tags={tags}
    />
  1. state:更新组件状态
  1.  

状态包含特定于此组件的数据,该数据可能随时间而变化。状态是用户定义的,它应该是一个普通的JavaScript对象。

  1.  

如果某些值未用于呈现或数据流(例如,计时器ID),则不必将其置于该状态。这些值可以定义为组件实例上的字段。

  1.  

有关状态的更多信息,请参阅状态和生命周期

  1.  

永远不要this.state直接改变,因为setState()之后的呼叫可能会取代你所做的突变。把this.state它看作是不可变的。

  1. 实列:点赞按钮
  1. import React from "react";
  2.  
  3. class LikesButton extends React.Component{
    constructor(props){
    super(props);
    this.state={
    likes:0
    }
    }
    increaseLikes(){
    this.setState({
    likes:++this.state.likes
    })
    }
    render() {
    return (
    <div className="">
    <button type="button"
    className=""
    onClick={()=>{this.increaseLikes()}}
    >
    {this.state.likes}
    </button>
    </div>
    )
    }
    }
    export default LikesButton
  1. 生命周期
  2.  
  3. 组件初始化
    组件跟新
    组件卸载

  1. 实列:电子钟表
  1. import React, {useCallback} from "react";
  2.  
  3. class ElectronCycle extends React.Component{
  4.  
  5. constructor(props){
    super(props)
    this.state={
    date: new Date()
    }
    }
    componentDidMount() {//创建时
    this.timer=setInterval(()=>{
    this.setState({
    date:new Date()
    })
    },1000)
    }
    componentDidUpdate(currentState,state) { //跟新时间控制台打印
    console.log(state)
    }
  6.  
  7. componentWillUnmount() {//卸载
    clearInterval(this.timer)
    }
    render() {
    return (
    <div className="digital-clock-component jumbotron">
    <h1>{this.state.date.toLocaleTimeString()}</h1>
    </div>
    )
    }
    }
  8.  
  9. export default ElectronCycle;

forms(表单)

实列:留言表单

*非受控组件:ref
* 不需要将状态保存在state中,直接从DOM中获取节点状态
* 受控组件
* forms(表单)
* 表单元素和其他DOM元素的区别:
* 可变状态保持在state中
* 需要通过this.setState去改变的React组件为受控组件

import React from "react";

//受控组件
/*class CommentBox extends  React.Component{
    constructor(prop){
        super(prop)
        this.state={
            value:''
        }
        this.handleChange=this.handleChange.bind(this)
        this.handleSubmit=this.handleSubmit.bind(this)
    }
    handleChange(event){//赋值动作
        this.setState(
            {
                value:event.target.value
            }
        )
    }
    handleSubmit(event){//提交动作
        alert(this.state.value)//展示数据
        event.preventDefault()//禁止组件默认的跳转动作
    }
        render() {
            return(
                <form className="col-lg-pull-5" onSubmit={this.handleSubmit}>
                    <div className="form-group">
                        <label>留言内容</label>
                        <input type="text"
                               className="form-control"
                               placeholder="请输入内容"
                               onChange={this.handleChange}//当输入的值发生事件后,会对当前输入框赋值
                               value={this.state.value}/>//获取输入的值
                        <button type="submit" className="btn btn-primary">留言</button>
                    </div>
                </form>
            )
        }
}*/
//非受控组件
class CommentBox extends  React.Component {
    constructor(prop) {
        super(prop);
        this.handleSubmit = this.handleSubmit.bind(this)
    }

handleSubmit(event) {
        alert(this.textInput.value)//直接获取DOM节点上的内容
        event.preventDefault()//禁止组件默认的跳转动作
    }

render() {
        return (
            <form className="col-lg-pull-5" onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label>留言内容</label>
                    <input type="text"
                           className="form-control"
                           placeholder="请输入内容"
                           ref={(textInput) => {this.textInput = textInput}}
                    />
                    <button type="submit" className="btn btn-primary">留言</button>
                </div>
            </form>
        )
    }
}

export default  CommentBox

属性、状态、生命周期

实列:

留言列表:

React开发思想:

状态提升:(lifting state up)

自上而下的数据流(top -down data flow)

单向绑定和双向绑定的区别:

由MVC引入俩个思想:

(1)用户修改数据直接反映到JS中,双向绑定:引入Angular;后简为Vue,也同时参考React实现了局部更新;

(2)只做应该改动而修改:React

MVC是对项目结构的处理,是一种开发模式;面向对象为一种编程概念;


React的单向绑定(半自动双向绑定)


推荐:用户数据单向绑定;UI数据双向绑定;

  1.  

props、state、forms的更多相关文章

  1. Props、State、Refs 与表单处理

    我们也了解到 React Component 事实上可以视为显示 UI 的一个状态机(state machine),而这个状态机根据不同的 state(透过 setState() 修改)和 props ...

  2. React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)

    本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...

  3. React评论展示案例(包含知识点:state、props、ref、React声明周期、localStorage本地存储等)

    本案例在上一篇的案例(React组件之间通过Props传值的技巧(小案例,帮助体会理解props.state.受控组件和非受控组件等))的基础上加强功能和用户体验,但是当然还有很多需要改进的地方,后期 ...

  4. 2020年最新阿里、字节、腾讯、京东等一线大厂高频面试(Android岗)真题合集,面试轻松无压力

    本文涵盖了阿里巴巴.腾讯.字节跳动.京东.华为等大厂的Android面试真题,不管你是要面试大厂还是普通的互联网公司,这些面试题对你肯定是有帮助的,毕竟大厂一定是行发展的标杆,很多公司的面试官同样会研 ...

  5. 阿里、腾讯、百度、网易、美团Android面试经验分享,拿到了百度、腾讯offer

    基本情况 2021届普通本科,Android开发岗. 此文主要是2020年秋招面试经验汇总,最终拿到了百度.腾讯的offer. 主要包括阿里三面,腾讯四面,百度三面,网易三面,美团一场面完. 阿里(由 ...

  6. ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State

    开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...

  7. 前端(十一):props、state及redux关系梳理

    所谓状态机,是一种抽象的数据模型,是“事物发展的趋势”,其原理是事件驱动.广泛地讲,世界万物都是状态机. 一.状态机是一种抽象的数据模型 在react中,props和state都可以用来传递数据.这里 ...

  8. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  9. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

随机推荐

  1. python-机器学习-深度学习-算法-面试题

    GitHub 地址: https://github.com/taizilongxu/interview_python https://github.com/imhuay/Algorithm_Inter ...

  2. python+lego ev3的心得总结 随时更新

    一.连接方面 1.试了蓝牙连接,被电脑防火墙拒绝了很多次,很奇怪,明明都pin码都对上了,然后瞬间被踢开. 2.数据线直连,在一台win7上怎么试也不行,在另一台上自动上windows update上 ...

  3. 深入理解-CLI与PHP-FPM

    原文地址:https://blog.csdn.net/lzx_victory/article/details/85917161 PHP-FPM模式相对于CLI比较复杂,因为PHP-FPM为常驻进程不断 ...

  4. spring security的BCryptPasswordEncoder加密和对密码验证的原理

    目录 BCryptPasswordEncoder加密和对密码验证的原理 一.加密算法和hash算法的区别 二.源码解析 1. encode方法 2. BCrypt.hashpw方法 3. matche ...

  5. [转帖]FastDFS图片服务器单机安装步骤

    FastDFS图片服务器单机安装步骤 https://www.cnblogs.com/yuesf/p/11847103.html 前面已经讲 一张图秒懂微服务的网络架构,通过此文章可以了解FastDF ...

  6. docker(三):服务services

    docker中services位于container上面,services可以控制image的运行方式,包括image运行时所需资源的大小 创建yml文件 yml文件定义了容器运行时的行为.我们先创建 ...

  7. golang 实现定时任务

    在实际开发过程中,我们有时候需要编写一些定时任务.当然我们可以使用crontab命令实现我们的需求.但是这种方法不满足一些定制化场景,同时会依赖具体的操作系统环境. 定时任务 在golang中我们可以 ...

  8. Log4J对系统性能的影响

    Log4J对系统性能的影响 主要体现: 1.日志输出的目的地,输出到控制台的速度比输出到文件系统的速度要慢. 2.日志输出格式不一样对性能也会有影响,如简单输出布局(SimpleLayout)比格式化 ...

  9. java 简易日历表

    在页面上输出1900年以后任意一年的简易日历表 package text3; import java.util.Scanner; public class MyCalendar { public st ...

  10. Kubernetes1.11.1 使用Nvidia显卡配置方法

    一.安装 1.1.kubernetes硬件支持问题说明 Kubernetes目前主要在很小程度上支持CPU和内存的发现.Kubelet本身处理的设备非常少.Kubernetes对于硬件都使用都依赖于硬 ...