React-组件

1. 函数式组件

function MyComponent(){
      return 一个h2标签
    };
    ReactDOM.render(, document.getElementById('test'));

2. 类

class MyClass {
  constructor(name) {
    this.name = name;
  }
}
const myClass = new MyClass("name");
console.log(myClass);
class MyChildClass extends MyClass {
  constructor(name, age) {
  	// 必须放在一开始的位置
    super(name);
    this.age = age;
  }
}
const myChildClass = new MyChildClass("name", "age");
console.log(myChildClass);

3. 初始化state

constructor(props) {
    super(props);
    this.state = {
        isHot: true
    }
};
render() {
    console.log(this);
    return 今天天气{this.state.isHot ? "炎热" : "寒冷"}
}

4. 点击变换

class MyComponent extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    isHot: true
                };
                // 重定向this指针
                this.changeWeather = this.changeWeather.bind(this);
            };
            render() {
                return 今天天气{this.state.isHot ? "炎热" : "寒冷"}
            };
            changeWeather(){
            	// 用this.setState更改数值
                this.setState({
                    isHot: !this.state.isHot
                });
            }
        }

5. props的使用

class MyComponent extends React.Component {
    render(){
        return (
            
                姓名：{this.props.name}
            
        )
    }
}

ReactDOM.render(, document.getElementById('test'));

6. jsx的语法糖

MyComponent {
	// 设置默认类型
    static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number.isRequired,
    speak: PropTypes.func
    }
    
    // 设置默认值
    static defaultProps = {
    name: '默认名称'
    }
};

const p = {age: 18};
ReactDOM.render(, document.getElementById('test'));