vue3-hooks,TSX,REACT 条件渲染，状态提升,HOOKSeg1: uniapp+hooks 1.列表有搜

eg1: uniapp+hooks

1.列表有搜索部分，可以定义search.ts来写hooks的部分。涉及到es6中模块的知识点。 1.search.ts中export const search={ func1:XXX,fun2:XXX}

** export 导出一个模块，import导入文件的时候导入整个文件即可。**

然后用结构解析解析各个功能。 const {func1,func2}=search

2.TSX
TSX就是建立一个节点树，其中创建的节点为虚拟节点， TSX例子:

 render(){ return( <div>
 {list.map((item:string)=>{item.name})}</div)}

渲染假设条件A， const arr=ref<string[]>([])

 render(){ return( <div>arr.value.length&&
 {list.map((item:string)=>{item.name})}</div)}

函数式组件：比较简单，无生命周期，无监听传递状态。标记functional:true

tsx中的动态变量使用{} 括起来

在setup函数中使用tsx

在setup函数中使用tsx,需要在return返回一个函数。

setup(){
return ()=>
return{
<div>34534</div>
}
}

REACT 条件渲染对于react中使用TSX,且DOM事件需要传参this的，需要现在constructor中定义并声明函数，绑定This.

tsx中可以使用&&进行条件渲染.
如果渲染的内容可能为空，那么render函数返回null.
也可以使用三目运算符。 4.经常在tsx中使用map

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

REACT状态提升 1.多个组件需要反映相同的变化数据，可以提升到最近的共同父组件。 A组件显示摄氏度 B组件显示华氏温度，那么都改变温度的方法提升到共同父组件。