zoukankan      html  css  js  c++  java
  • react学习01

    react

    react render()函数返回只能是一个标签(里面可以包其他东西)
    

    state(状态) vs props(属性)

    state 改变,视图改变,state是一个组件里面的状态,然后props是可以给一个组件添加属性方法。
    可以传递到下一个组件,下一个组件通过this.props可以获得对应组件里面有多少方法和属性。
    state和props一般会配合使用。

    export default class Layout extends React.Component{
      constructor(){
      	super();
    
      	this.state = {name:'will'}
      }
    
      render() {
        setTimeout(() => {
          this.setState({name: 'bob'});
        }, 1000)
        return (
          <div>
           {this.state.name}
           <Header />
           <Footer />
          </div>
        );
      }
    }
    

    events,双向绑定例子

    //layout.js
    
    'use strict';
    import React from 'react';
    import Header from './header';
    import Footer from './footer';
    
    export default class Layout extends React.Component{
      constructor(){
        super();
        this.state = {
          name : 'will',
          title : 'helloworld'
        }
      }
    
      
      changeTitle(title){
        this.setState({
          'title' : title
        })
      }
    
      render() {
        return (
          <div>
           <Header title={this.state.title} changeTitle={this.changeTitle.bind(this)}/>
           <Footer />
          </div>
        );
      }
    }
    
    //header.js
    'use strict';
    import React from 'react';
    import Title from "./header/title";
    
    export default class Header extends React.Component{
      onChange(e){
        //e.target就是选中操作的那个Dom.然后调用原生的value属性
        const value = e.target.value;
        //这里利用props调用了父级的changeTitle方法
        this.props.changeTitle(value);
      }
    
      //利用props属性和state状态可以组合做很多事情,onChange
      //这里就是js的事件,可以onclick,onBlur等等
      
      render() {
        return (
          <div>
           <input value={this.props.title} onChange={this.onChange.bind(this)}/>
           <Title title={this.props.title} />
          </div>
        );
      }
    }
    
  • 相关阅读:
    leetcode66 plusOne
    park/unpark 阻塞与唤醒线程
    leetcode55 jumpGame贪心算法
    ACID特性与事务的隔离级别
    PCB ODB++(Gerber)图形绘制实现方法
    PCB 所建不凡 AWS 技术峰会2018 • 深圳站 2018.9.20
    PCB SQL SERVER 位运算应用实例
    PCB SQL SERVER 枚举分割函数(枚举值分解函数)
    PCB SQL SERVER 正则应用实例
    PCB Genesis 外形加内角孔实现方法
  • 原文地址:https://www.cnblogs.com/caijw/p/7095239.html
Copyright © 2011-2022 走看看