react 学习笔记

Posted 2020-10-29 sunshine

Babel 转译器 这是react自带的一个编译器

props和states一个是组件外部的，一个是组件内部的

jsx代表objects.

Hello.js

import React from ‘react‘;

export default ({ name }) => <h1>Hello {name}!</h1>;

index.html

<div id="root"></div>

 index.js

import React, { Component } from ‘react‘;
import { render } from ‘react-dom‘;
import Hello from ‘./Hello‘;
import ‘./style.css‘;
import Name from ‘./Name‘;
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: ‘React1‘,
      insertName: ‘xss‘,
      hasNameFlag :true
    };
  }

  changeName = () => {
    this.setState({
      insertName: ‘yys‘,
    })
  }
  deleteName = () =>{
     this.setState({
      hasNameFlag :false
    })
  
  }
  render() {
    const { insertName,hasNameFlag} = this.state;
    const a = (
      <h1 className={"greeting"} title="yys">
        Hello, world!
      </h1>
    );
    let name = null;
    if(hasNameFlag){
      name = <Name name={insertName} />;
    }
    return (
      <div>
        <Hello name={this.state.name} />
        {name} 
        <button onClick={this.changeName}>改名</button>
          <button onClick={this.deleteName}>删除</button>
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById(‘root‘));

Name.js

import React, { Component } from ‘react‘;
class Name extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    };
  }
componentWillReceiveProps(nextProps){
  if(nextProps.name === this.props.name) return;
  this.setState({
    name:nextProps.name
  })

}
componentDidUpdate(){
  console.log("componentDidUpdate");
}
componentWillUnmount(){
    console.log("componentWillUnmount");

}
  render() {
    const { name } = this.state;
    return <h2>{name}</h2>
  }
}

export default Name;

constructor  1 只执行一次

compomentwillMount  1 dom放进去之前，也是只执行一次

componentDidMount 1 dom放进去之后，也是只执行一次

componentwillReceIveProps  有改变就执行，修改states的时候用到

componentwillupDate dom更新之前 

componentDidupDate  dom更新之后

componentWillUnmount  dom组件被移除之前被调用，可以用于做一些清理工作