首先:搭建脚手架
npx create-react-app 项目名称
注意:以上npx,只写过vue项目的应该会认为是错别字
然后:运行 npm start
以上创建脚手架-----------------------
《class 》写法 函数写法先绕一下 ! 下文很多地方会跟Vue进行比较
看我先给张图,下图颜色相同的注解表示有关联
此处在说一个钩子函数 常用!!! 相当于vue 的mounted
componentDidMount()
一、React组件通信
React不像Vue 父传子 props 子传父 $emit 。
React的通信方式就是props, 由于它是单项数据流的原因,只能在父组件中操作,操作完成之后在传回给子组件。如下:
子组件
SideBar 是ui框架的Tab组件,此处不要纠结
接下来说一下大概流程:首先点击tab(onChange)也是Tab组件提供的方法,传一个事件到父组件,这里我点击的事件和传的事件叫同个名字
点击事件不喜欢绑定上列写法 下面也可:
父组件
这里父组件接收事件和Vue很像 在父组件的子组件标签中绑定事件 然后从父组件操作 ,如拿传过来的值进行交互
但是!!
交互过后log的数据改变视图不更新 这是为啥呢???
Reacr这里和微信小程序有点像,如果想要更新视图 需要用到 this.setStart 微信小程序是this.setData()
——以上就是简单的通讯以及一些 react 经常用到的东西