关于React的三大属性

state

当页面发生变化时,用state属性来记录页面变化,主要是组件内部发生变化时

<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src = '../js/babel.min.js'></script>
<script type="text/babel">
    class Like extends React.Component{
        constructor(){//ES6语法定义类
            super();//与constructor配对使用,这时候this指向其实例对象
            this.state = {
                isLikeMe:false
            };
            // this.myClick = this.myClick.bind(this)跟箭头函数二选一来改变this指向
        }  
        myClick(){
            console.log(this )
            const { isLikeMe } = this.state; //此时this指向undefined,为了能够读取到实例对象上的state属性,可采用blind改变this指向,或者采用箭头函数
            this.setState(
                isLikeMe:!isLikeMe
            }){//重新调用render  这是一个方法,setState会方法会使Render方法重新调用,从而重新渲染虚拟DOM,不允许通过this.state.isLikeMe来改变状态(改变状态必须使用this.setState()方法)
        }
        render(){
            const {isLikeMe} = this.state
            console.log(isLikeMe)
            return <h2 onClick={this.myClick}>{isLikeMe?"你喜欢我":"我喜欢你"}</h2>
        }
    }
    ReactDOM.render( <Like/>,document.getElementById('test'))
//类名首字母必须大写,否则会当成html标签解析,会啊哦错。
//render里必须传一个闭合标签,如果标签里面有内容可以是双标标签,没有内容是双标签,render返回值多个标签必须有一个根标签

props

每个实例对象都会有一个prop属性,主要通过标签由外向内传递内容,传递的可以是对象数组,和function。

  • 注意组件内部不要修改prop的值
  • 通常要有约束条件,和默认值
<div id = "test"></div>
<body>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<script type="text/babel">
    const person={
        name:'jack',
        age:18,
        sex:"男"
    }
    class Person extends React.Component{
       /* static propType={//在组件类上,组件的实例对象是没有办法使用的
            name:PropTypes.string.isRequired,//组件回家回家收一个name属性,字符串类型,必须传
            age:PropTypes.number.isRequired,
            sex:PropTypes.string
        }*/
        render(){//定义在原型上,给组件的实力队形使用
            const {name,age,sex}=this.props;//只读属性不要修改
            return <ul>
            <li>姓名:{name}</li>
            <li>性别:{age}</li>
            <li>年龄:{sex}</li>
             </ul>
        }
    }
    //约束条件,一般要写
    Person.propTypes={
        name:PropTypes.string.isRequired,//组件回家回家收一个name属性,字符串类型,必须传
        age:PropTypes.number,
        sex:PropTypes.string//PropTypes是一个变量,a.b a是变量,b是属性
    }
    //默认值
    Person.defalutProps={//定义了默认值就不用串isRequire了
        age:20,
        sex:"女"
    }
    // ReactDOM.render(<Person name={person.name} age={person.age} sex={person.sex}/>,document.getElementById('test'))
//简写
    ReactDOM.render( <Person {...person}/>,document.getElementById('test'))
    //找到Person组件创建实例对象
    //将属性传到props上
</script>

ref

三种写法
stringRef()即将要废弃,不推荐
funcRef()
creatRef()推荐使用,复杂,但是最符合React的规则

<div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下:
      1. 界面如果页面所示
      2. 点击按钮, 提示第一个输入框中的值
      3. 当第2个输入框失去焦点时, 提示这个输入框中的值
   */

    class Input extends React.Component {

      /*constructor() {
        super();

        this.createRef = React.createRef();
        console.log(this.createRef); // 默认值:{current: null}
      }*/

      // 给实例对象添加的直接属性
      createRef = React.createRef();

      // 给实例对象添加直接方法
      handleClick = () => {
        // 箭头函数,this才能是组件的实例对象
        // 获取input的值
        // const value = this.refs.stringRef.value;
        // const value = this.funcRef.value;
        const value = this.createRef.current.value;
        // 提示出来
        alert(value);
        // 清空数据
        this.createRef.current.value = '';
      };

      // 失去焦点事件的回调函数
      handleBlur = (event) => {
        // console.log(event.target);
        const value = event.target.value;
        alert(value);
      };

      // 给原型上添加方法
      render() {
        console.log(this);

        return <div>
          {/*
          stringRef:使用简单,但是即将废弃,不推荐使用
          <input type="text" ref="stringRef" />
          */}
          {/*
          funcRef: 使用简单,比stringRef性能更好
          <input type="text" ref={(input) => this.funcRef = input} />*/}
          <input type="text" ref={this.createRef} />
          <button onClick={this.handleClick}>点击提示数据</button>
          <input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/>
        </div>
      }
    }

    ReactDOM.render(<Input/>, document.getElementById('example'));
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,100评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,308评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,718评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,275评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,376评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,454评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,464评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,248评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,686评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,817评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,484评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2 351

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,433评论 1 33
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,262评论 0 2
  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,009评论 0 1
  • 说在前面 关于 react 的总结过去半年就一直碎碎念着要搞起来,各(wo)种(tai)原(lan)因(le)。心...
    陈嘻嘻啊阅读 6,858评论 7 41
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 1,673评论 0 5