内容：props、状态机、事件、 组件通信、模拟表单双向绑定 一、组件的props 1.类组件 定义： import React from 'react' class Home extends React.Component{ constructor(){ super(); console.log("构造函数先执行") } //渲染页面的钩子函数 render(){ console.log("渲染函数执行") return( ) } } export default Home; 拥有构造函数等生命周期函数（业务组件/状态组件） 类组件中可以定义很多个函数、初始数据等，通过this.props接收父组件传递的数据 2.函数组件 定义： import React from 'react' var Movie = (props)=>{ return( ) } export default Movie; 它没有生命周期等函数（无状态组件/木偶组件）、没有状态机。 函数组件要接收父组件传递的数据需要通过函数的形参来接收。 二、状态机 state是react中内置的状态管理器，设置一些初始数据（数据格式是对象）。 setState，react中不建议我们直接通过state.变量名来进行赋值，即使赋值成功，但是页面上的数据不会发生变化（没有重新调用render函数），推荐我们使用setState方法来改变状态机中的数据。 setState会把新的数据合并到原来的数据中，重新调用render方法。 三、事件 1.事件绑定 (1)es5方式进行绑定 this.addNum() }>es6-保持this指向
this.handle1(e) }>es6-保持this指向-事件 2.传递参数 (1)es5传递参数 ①事件 不需要显示的在函数中进行传递，在定义函数的形参中直接使用即可 ②额外参数 如果要在函数中继续获取事件和其他参数，那么在使用bind时应该加上this，然后再传递其他参数。 es5--事件--无参数 es5--事件--有参数 es5传递参数的方式，在定义函数时，形参中的事件参数应该放到所有普通参数的最后。 (2)es6传递参数 this.handle2('hehe',e) }>es6-保持this指向-事件-有参数 es6要获取事件和其他额外参数时，实参传递和形参接收的顺序是一致的。 四、组件通信 1.父子组件 在父组件上使用子组件时，通过自定义属性名=属性值进行数据的传递 在子组件中，如果是类组件通过this.props.自定义属性名来接收数据 ​ 如果是函数组件通过形参props.自定义属性名来接收数据 父组件： import React,{ Component } from 'react' //引入子组件 import Child from './Child' export default class Parent extends Component{ render(){ return( ) } } 子组件： import React from 'react' var Child = (props)=>{ return( ) } export default Child; 2.子父组件 在父组件使用子组件时，除了可以传递普通数据，还可以传递事件。 父组件： state = { msg:'' } setMsg(e){ console.log('此事件被子组件执行了',e) this.setState({ msg:e }) } render(){ return( ) } 子组件： render(){ return( ) } 3.DOM节点操作 ref (1)字符串 可以给子组件设置一个ref属性，然后可以通过this.refs.属性名来获取/设置子组件中的数据。 可以通过this.refs.mySong来获取到组件。 (2)回调函数 可以给子组件设置一个ref属性，它的属性值不是字符串，而是一个函数（自动执行）。可以把子组件当成参数进行传递，然后就可以对组件中的数据进行获取或者修改。 this.getChild2(el) }> 回调函数的写法不会在this.refs存在子组件。 不推荐直接使用ref，只有万不得已才去使用。 五、模拟表单数据双向绑定 六、初始化项目失败 [图片上传失败...(image-f0df1e-1582630015203)] 解决办法： 在命令行中执行命令：npm cache clean --force 清除缓存 然后再重新执行初始化操作 七、作业 用react实现用户注册、登录界面，点击注册或者登录按钮时获取到用户输入的内容 表格页面 （可以使用bootstrap，样式要好看）

本文章由javascript技术分享原创和收集