核心思想
都是推崇组件化的开发理念
vue
还是很 划分出 html(结构) css（表现） js（行为）的形式
template 模板
指令 v-if v-show v-for
还是会有 结构 表现 行为 分离的感觉、
监听 Object,defineProperty()
react
函数时思想
jsx 语法， 将js css 融入到 js 更加灵活
组件调用setStare / props 变化时 组件内部的额render 会i重新渲染， 子组件也会重新 渲染
可以通过 shouldComponentUPdate 或者PureComponent可以避免 不必要的重新渲染
组件的形式
ｖｕｅ xx.vue
用 {{}}表示变量
// 模板(html)
{{name}}
// 数据管理(js)
// 样式(css)
使用组件
···
···
react
推荐使用 jsx js 文件 便是组件 ， 支持class组件 function 组件的形式，
{} 包裹变量
注意： 组件名称 必须用大写字母开头
组件形式-- class 组件
···
import React from 'react';
class NewComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'xx'
};
}
render() {
rerurn(
}
}
export default NewComponent;
···
function组件
···
import React, { useState } from 'react';
function NewComponent() {
const [name, setName] = useState('');
return (
}
export default NewComponent;
···
数据管理
组件数据管理 有 自身的数据 父组件的数据props
vue react 的props 都是单向数据流， 父级props 更新会向下流动到子组件， 反过来不行‘’
props 可以时数组 和对象
vue 的 props
静态 传递的一般是 字符串
···
···
布尔值 如果是true 也可以直接传递 直接可以传递属性 <组件 disabled >
传值如果是false 需要动态props 传值
···
// 简写形式
···
动态 使用v-bind
data
管理组件数据
会递归将data 转换成getter/setter
展开解释gettrer setter
{
get根据get中变量的变化而变动；
set是根据计算属性值的直接更改而变动;
}
vue 监听data的变化，从而data属性 能够响应数据的变化
理解{
dom 展示 以 当前的data 的属性进行绑定
getter setter 监听改变 当data 已有变动 响应的赋值也会改变 触发改变
}
对象 data 一个对象
在创建实例之前 就声明所有的根级响应式属性
react
props
也是 可以传递 动态的 静态的 props
静态的 props
{
如果传递的只是字符串的话 就可以直接 属性= ‘要传递的内容’ 传递过去 （静态）
}
动态的props
function Welcome(props){
return hello, {props.name}
}
const element = class组件 使用this.props 获取 组件的props
class Welcomwe extends React.component{
constructor(props){
super(props)
}
render(){
const {name} = this.props
return {name}
}
}
state
state 管理组件内的数据
hooks 使得函数组件也可管理state
class Welcome extends React.Component{
constructor(props){
super(props)
this.state = {name: 'xx'}
this.changeName = this.changeName.bind(this)
}
changeName(){
this.setState({
name: 'new name'
})
}
render(){
const {name} = this.state
return {name}
}
}
class 组件中的 构造函数constructor 中 定义 组件内数据（state）
setState 作用：
修改数据 必须通过 setState 修改， 不能直接修改 state
？？？
关于class组建的setState有以下两点说明：
1.setState更新是异步的，但是在setTimeout和原生事件中是同步的。
2.setState更新的是组件的部分数据，react会自动将数据合并。
？？？
？？？？
function组件useState
react 16.0之前函数组件只是纯的渲染组件，hooks的出现赋予了函数组件管理state的能力。
useState返回一个state，以及更新state的函数。如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。
import React, { useState } from 'react';
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
);
}
复制代码
关于setState有以下三点说明：
1.与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。
2.只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
3.只能在 React 的函数组件或自定义hook中调用 Hook。不要在其他 JavaScript 函数中调用。
？？？？
组件通信---组件间数据交互
父子组件 {
vue 使用props + 自定义事件 实现
react 通过props + 回调 实现
}
vue父子组件交互
父组件通过 props传递 数据给子组件
子组件 使用$emit 触发自定义事件
父组件中监听 子组件的自定义事件 获取 子组件传递来的数据
子组件
···
change(){
this.name = 'new name'
this.$emit('myEvent', this.name)
}
···
父组件 包含子组件的组件
···
< 子组件 @myEvent = "getName" >
getName(name){
console.log(name)
}
import 子组件
···
react 父子组件传递
可以通过props 传递 数据或者回调函数 给子组件
子组件 通过props 接受 父组件传下来的回调事件
操作：
？子组件 通过props 传下来的 回调函数 返回数据
import React, {useState} from 'react'
function Children(props){
const {myEvent} = props // 接受父组件的回调函数
const [name, setName] = useState('xxx') // data
const changeName = ()=> {
setName('new name')
myEvent('new name')
}
return {name}
}
父组件 通过 回调函数 获取子组件 传递上来的数据
function Parent(){
const changeName = name => {
console.log(name)
}
return
}
跨组件数据交互
vue provide inject
react Context
vue 祖先定义 provide 应该是一个对象 或者返回一个对象的函数
子组件 定义 inject 应该是一个对象 或者字符串数组
provide： {
message: 'xxxxx'
}
inject: ['message']
react ？？？？？？？？？看不懂
css style
//绑定对象
data: {
isActive: true,
hasError: false
}
// 绑定 数组
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
class 可以直接绑定组件上， react不支持
····
// 定义时 加入class
Vue.component('my-component', {
template: '
'
})
// 使用时
····
style 语法一样
baseStyles: {
fontSize: '20px',
color: 'blue'
},
overridingStyles: {
height: '80px'
}
react 是以 className 赋值
function NewComponent() {
const newClass = 'conrainer'
return This is New Component.;
}
style
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return Hello World!;
}
生命周期
vue
初始化 挂载 更新 卸载
beforeCreate
created
beforeMount
mounted
beforeupdate
updated
beforeDestroy
destroyed
react 周期
16 之前
初始化 constructor 初始化state 和 设置属性
挂载阶段
componentWillMount() 组件挂载之前调用 并且只会调用一次
render (必须定义的 生命周期)，用来渲染 DOM , 必须return 一个React元素
不负责 组件实际渲染工作 之后又自身根据此元素去渲染出页面DOM
？？
16之后 去掉
？
事件处理
事件修饰符
.stop：阻止事件继续传播
.prevent：阻止事件默认行为
.capture：添加事件监听器时使用事件捕获模式
.self：当前元素触发时才触发事件处理函数
.once：事件只触发一次
.passive：告诉浏览器你不想阻止事件的默认行为，不能和.prevent一起使用。