react 笔记

组件化： 从页面的角度出发

把一些可复用的ui 元素脱离为单独的组件

模块化 ：从代码的角度出发

把一些可复用的代码，脱离成一个独立的模块，便于代码的维护和开发

Dom的本质：用js 表示元素 操作元素

 

react 组件化思维：

不断切割 复用

react 中如果你想改变state 中的数据，你必须使用this.setState 的方法

 

展开运算符：

例如：

list:['1','2','5'] =>....list 重新生成数组

 

 

{ this.state.list.map((item,index)=>{ return <li>{item}</li> }) }

使用map 函数 ,接受一个参数 ，第一个参数是数组的对象，第2个是数组的索引

this.state.list.map((item,index)=>{ })

 

必须要 return 回去

return <li>{item}</li>

 

 

 

this.state={ inputValue:'hello world', list:['hello','world'] }

展开运算符...this.state.list，生成一个全新的数组 // list:[...this.state.list,this.state.inputValue] //后面是新加入的数组，两个组成一个新的数组 list:[...this.state.list,this.state.inputValue]

 

 

 

父子组件的传值 :

父组件向子组件传递数据：

我们可以使用this.props._ 进行传值 ，先在父组件声明一个变量进行储存，然后将变量传递给子组件

子组件向父组件传递数据：

调用父组件的方法：

this.props.方法 记得传递过来的方法要绑定在父组件上