React 笔记

最新推荐文章于 2025-02-05 08:41:29 发布

秃子编程

最新推荐文章于 2025-02-05 08:41:29 发布

阅读量289

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/u010792039/article/details/80858891

前端专栏收录该内容

49 篇文章

订阅专栏

Component 生命周期：constructor构造函数  
                    componentWillMount渲染前  
                    render渲染（如果此过程调用了其它组件，就会去执行其它组件的生命周期，之后
                    再返回到该组件的生命周期）
                    componentDidMount渲染后
组件更新周期： shouldComponentUpdate(nextProps,nextState)
              render
                componentWillUpdate(nextProps,nextState)
                componentDidUpdate(preProps,preState)

import React, { Component } from 'react';
import './App.css';

import Person from './person/person.js';
import Company from './company/company.js';
import List from './list/list.js';

class App extends Component {

  constructor(props){
    super(props);
    this. state = {
      show: true,
      companys: [{
        id: 1,
        companyname: "北京LIKE技术有限公司",
        companylocation: "北京朝阳区朝阳大道1029号",
        companydes: "一家科技公司哦"
      }, {
        id: 2,
        companyname: "北京LIKE技术有限公司",
        companylocation: "北京朝阳区朝阳大道10号",
        companydes: "一家科技公司哦"
      }, {
        id: 3,
        companyname: "北京LIKE技术有限公司",
        companylocation: "北京朝阳区朝阳大道007号",
        companydes: "一家科技公司哦"
      }],
      persons: [
        {
          id: 1,
          name: "lily",
          num: 22,
          msg:"you are bitch"
        },
        {
          id: 2,
          name: "lucy",
          num: 20
        },
        {
          id: 3,
          name: "jack",
          num: 21
        }
      ]
    }
    console.log("constructor" );
  }

  componentWillMount(){
    console.log('componentwillmount');
  }
  change = (e, id) => {
    const index = this.state.persons.findIndex(p => {
      return p.id === id;
    });

    const persons = { ...this.state.persons };
    persons[index].name = e.target.value;
    this.setState(persons);
  }

  //显示隐藏列表
  changeHide = () => {
    this.setState({
      show: !this.state.show
    });
  }
  //点击事件
  itemClick = (id) => {
    console.log("itemClick" + id);
  }
  //删除事件
  deleteItem = (id) => {
    const persons = this.state.persons;
    persons.splice(id, 1);
    this.setState({
      persons: persons
    });
  }
  render() {
    console.log(' render');
    let persons = null;
    let companys = null;
    if (this.state.show) {
      persons = (
        <List>
          {
            this.state.persons.map((person, index) => {
              let son = (<Person
                key={person.id}
                name={person.name}
                num={person.num}
                itemClick={this.itemClick}
                deleteItem={() => this.deleteItem(index)}
                inputChange={(e) => { this.change(e, person.id) }} />);
                if( person.msg){
                  son = (<Person
                    key={person.id}
                    name={person.name}
                    num={person.num}
                    itemClick={this.itemClick}
                    deleteItem={() => this.deleteItem(index)}
                    inputChange={(e) => { this.change(e, person.id) }} >you are bitch</Person>);
                }
              return son;
            })
          }
        </List>
      );
      companys = (
        <List>
          {
            this.state.companys.map((company, index) => {
              return <Company
                companyname={company.companyname}
                companylocation={company.companylocation}
                companydes={company.companydes}
                key={company.id} />;
            })
          }
        </List>
      );
    }


    const classes = [];
    if (this.state.persons.length > 3) {
      classes.push("red");
    } else {
      classes.push("bold");
    }
    return (
      <div className="myfirstcss">
      <div>{this.props.title}</div>
        <div className={classes.join(" ")}>修改class</div>
        <button onClick={()=>this.changeHide( null)}>显示隐藏</button>
        <span>
          you think you are perfect,<br />no,you are wrong,you are bitch.
          </span>
        <br />
        {persons}
        {companys}
      </div>
    );
  }
  componentDidMount(){
    console.log('componentDidMount');
  }
}

export default App;

无状态组件

import React from 'react';
import './person.css';

function getWorld(props) {
    const style1 = {
        background: "#897766",
        border: "1px solid black"
    };
    return (
        <li onClick={()=>props.itemClick( props.num)}>
            {props.name} first module and my company has {props.num} person
           {
                props.children ?
                    <div>
                        your friend has a word to you "{props.children}"
                    </div> : null
            }
            <input style={style1} className="inputdiv" onChange={props.inputChange}></input>
            <div onClick={props.deleteItem}>删除</div>
        </li>
        
    );
}

export default getWorld;