React 笔记

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;