zoukankan      html  css  js  c++  java
  • React 属性和状态的一些总结

     

    一、属性

      1、第一种使用方法:键值对

         <ClaaNameA name = “Tom” />

        <ClaaNameA name = {Tom} />

        <ClaaNameA name = {“Tom”} />

        <ClaaNameA name = {[1,2,3]} />//数组

        <ClaaNameA name = {FunctionNAme} /> //定义一个函数

     

      2、第二种方法:三个点的展开对象形式

        var props = {

          one :”123”,

          tow :321

         }

        <ClassNameB {…props} />

        增加三个引号相当于这里面拿到两个属性了(one和two)

     

      3、setProps形式:通过组件更新属性,不能在组件内部中修改属性的,因为会违背组件设计原则(尽量避免)

         var instance =React.render(<ClassNameC ><ClaasNameC/>,document.body);

        instance.setProps({name:”Tom" });

     

    二、状态:事物所处的状况,由事物自行处理不断变化/事物的私有属性

      getInitialState:初始化每个实例特有的状态

      setState:更新组件状态

      setState会触发diff算法:判断state和页面结果的区别,是否需要更新

     

    三、状态和属性对比

      状态和属性都会触发render更新,都是纯JS对象

      状态:是和自己相关的,既不受父组件也不受子组件影响

      属性:本身是不能自己去修改的,只能从父组件获取属性,父组件也能修改它的属性

      根本的区别:组件在运行时需要去修改维护的就是状态

    四、简单的demo熟悉一下:

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
     5     <title>daomul's example</title>
     6     <link rel="stylesheet" href="../shared/css/base.css" />
     7   </head>
     8   <body>
     9     <h1>Text demo</h1>
    10     <div id="container">
    11 
    12     </div>
    13 
    14     <script src="../shared/thirdparty/es5-shim.min.js"></script>
    15     <script src="../shared/thirdparty/es5-sham.min.js"></script>
    16     <script src="../shared/thirdparty/console-polyfill.js"></script>
    17     <script src="../../build/react.js"></script>
    18     <script src="../../build/JSXTransformer.js"></script>
    19     <script type="text/jsx">
    20 
    21         //内容组件
    22         var Content = React.createClass({
    23           getInitialState:function(){
    24             return {
    25               inputText:'',
    26             };
    27           },
    28           handleChange:function(event){
    29             this.setState({inputText:event.target.value});
    30           },
    31           handleClick:function(){
    32             console.log("props name is " + this.props.selectName + " 
     and inputText is "  + this.state.inputText);
    33           },
    34           render:function(){
    35 
    36             return <div>
    37               <textarea onChange = {this.handleChange} placeholder = "please input something!"></textarea>
    38               <button onClick = {this.handleClick}>sumbit</button>
    39             </div>;
    40           },
    41         });
    42 
    43         //评论组件
    44         var Comment = React.createClass({
    45           getInitialState:function(){
    46             return {
    47               names:["Tom","Axiba","daomul"],
    48               selectName:'',
    49             };
    50           },
    51           handleSelect:function(){
    52             this.setState(
    53                 {selectName : event.target.value}
    54               );
    55           },
    56           render:function(){
    57             var options = [];
    58             //往options中添加子option
    59             for (var option in this.state.names) {
    60               options.push(<option value={this.state.names[option]}> {this.state.names[option]}  </option>)
    61             };
    62             return <div>
    63               <Content selectName = {this.state.selectName}>
    64               </Content>
    65               <select onChange = {this.handleSelect}>
    66                 {options}
    67               </select>
    68             </div>;
    69           },
    70         });
    71 
    72         //start render
    73         React.render(<Comment></Comment>,document.body);
    74     </script>
    75   </body>
    76 </html>
  • 相关阅读:
    day84:luffy:优惠活动策略&用户认证&购物车商品的勾选/结算
    day83:luffy:添加购物车&导航栏购物车数字显示&购物车页面展示
    day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器
    day81:luffy:课程分类页面&课程信息页面&指定分类显示课程信息&分页显示课程信息
    day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能
    day79:luffy:注册之对手机号的验证&实现基本的注册功能逻辑&点击获取验证码&redis
    day78:luffy:前端对于token的认证&滑动验证码的实现
    day77:luffy:导航栏的实现&DjangoRestFramework JWT&多条件登录
    day76:luffy:项目前端环境搭建&轮播图的实现
    day75:luffy:路飞学城项目后端环境搭建&Git相关知识点
  • 原文地址:https://www.cnblogs.com/daomul/p/4853637.html
Copyright © 2011-2022 走看看