写在前面

react如何学

对于有Vue开发经验的同学来说，react很多可以类比着Vue中的一些语法来学习，但一定要注意他们之间的区别，比如useState，可以类比着Vue中的ref，reactive来学习，可以简单快速的理解React中的一些概念。

没有Vue开发经验的同学，适合参考着React的官方文档，跟着井字旗的项目慢慢走，理解React是如何去实现一个功能，以及拆解组件的思路。

基本使用

其实和vue很类似，只是单大括号和双大括号的区别，都可以使用运算符，变量，或者函数，以及表达式

import React from "react";
import ReactDom from "react-dom";

let name = {
    first: "大 ",
    last: "亦",
};
let fullName = function (user) {
    return <h2> {user.first + user.last}</h2>;
};
let changeName = function (user) {
    if (user) {
        fullName(user);
    } else {
        return <h2>未找到用户</h2>;
    }
};
//渲染到页面
ReactDom.render(<h2>{changeName(name)}</h2>, document.querySelector("#root"));

相比较于vue中将所有数据存放在data中，react提供一种更为灵活的方式，将dom存放在js中，这里返回的h2元素并不是我们常见的dom元素，而是jsx，JavaScript+xml 这样进行渲染更为高效，而且在react中只对需要变更的元素进行更新，从而避免了整个页面的重绘

循环绑定

import React from "react";
import ReactDom from "react-dom";

let arr = [1, 2, 3, 4]
//使用map对数组（对象中的元素进行遍历，一定要绑定key）
ReactDom.render(<ul>{arr.map((item, index) => {
    return <li key={index}>{item}</li>
})}

</ul>, document.querySelector("#root"));

使用map，而不是filter或者foreach，因为map可以return，而另外两者不可以

组件化

函数声明

案例

import React from "react";
import ReactDom from "react-dom"; 

function Com(props){
    return <h2>hello,{props.hello}</h2>
}
ReactDom.render(<Com hello={'大亦'}/>, document.querySelector("#root"));

注意

一定要将组件名大写，如果组件名不大写，浏览器自动识别为元素
函数式声明中一定要有return，将组件内容return回去

类声明

案例

import React from "react";
import ReactDom from "react-dom";

class Cnm extends React.Component {
  //使用render函数，将虚拟dom渲染为真实dom
    render() {
        return <a href={this.props.href}>{this.props.hello}</a>

    }
}

ReactDom.render(<Cnm hello={'大亦'} href={'https://www.baidu.com'}/>, document.querySelector("#root"));

注意

使用类声明方式，必须继承react.Component
类中必须要有一个render函数
在render函数中，return一个jsx元素
大写字母开头！！！！

父子组件中的通信

react中遵循 单向数据流

我的理解是通过数据的来源是可控的，例如通过props获取数据，或者通过redux的中获取数据

hooks

useState

作用：让函数式组件拥有类组件中state响应式的能力

const [aa, setAa] = useState(false);//后面的传初始值可以为任意类型

useEffect

作用：生命周期的合并api，这这里可以处理加载完成时，销毁时的一些处理，比如请求数据，或者dom操作，在返回函数中，放置销毁时需要处理的方法。

  useEffect(() => {
    document.title = `today`;
    return ()=>{
      clearTimeout()
    }
  });

这是最常用的两个，其他的可以作为了解，比如useMemo 就可以对useState进行性能优化。

React学习｜8月更文挑战