React学习笔记

最新推荐文章于 2022-11-01 10:52:37 发布

萌芽子

最新推荐文章于 2022-11-01 10:52:37 发布

阅读量378

点赞数 1

分类专栏：萌芽笔记文章标签： javascript react js

本文链接：https://blog.csdn.net/Meng_ya_zi/article/details/107980851

版权

萌芽笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

React学习笔记

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。作为前端三大框架之一不会的小伙伴是时候学一学啦。
这里萌芽只大概做个总结，新手小白的话可以去看看菜鸟教程，想深入了解的话可以去看官方文档，废话不多说，上干货！
菜鸟教程：https://www.runoob.com/react/react-tutorial.html
官方文档：https://react.docschina.org/docs/getting-started.html

React生命周期

componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。

可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

React组件

react组件有两种写法，一种是函数定义，另一种是class继承React.Component定义。组件名首字母必须大写并且组件内部的jsx模板必须有一个顶层外部标签，否则会报错。(这一点和vue组件一样.

props：外部传递进来的参数（类组件应始终使用 props 调用基础构造函数）
state：内部私有参数（React 中只需更新组件的 state就会重新渲染用户界面）

React.Component

在 React.Component 的子类中有个必须定义的 render() 函数。当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

React 元素（通过 JSX 创建<div>生成DOM节点，<Hello/>渲染为组件
数组或 fragments（使得 render 方法可以返回多个元素
Portals（可以渲染子节点到不同的 DOM 子树中
字符串或数值类型（它们在 DOM 中会被渲染为文本节点
布尔类型或 null（什么都不渲染

如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考。

组件的生命周期

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

卸载

当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount()

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

组件还提供了一些额外的 API：

class属性

实例属性

props
state

事件处理

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
   
    //这里绑定是必要的，这样 `this` 才能在回调函数中使用
    this.handleClick = this.handleClick.bind(this);
    
    个人理解：将this绑定在handleClick，因为handleClick调用的this.setState是
    来自Toggle里面的方法。我们要知道this是谁调用指向谁所以这里必须用bind绑一下this
    
    }


    handleClick(id,e) {
        //取消事件的默认动作。
        e.preventDefault();

        //更改State的参数并重新渲染组件
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return (
            <button onClick={this.handleClick.bind(this, this.state.isToggleOn)}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        );    
    }
}

//渲染到页面
ReactDOM.render(
    <Toggle />,
    document.getElementById('example')
);

向事件处理程序传参 [暂时保留，之后有时间深入学习一下]

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

琐碎知识点

React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。
React 只会更新必要的部分， React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。
state更新可能是异步的，React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。
在 React 中你不能使用返回 false 的方式阻止默认行为，你必须明确的使用 preventDefault。

博客推荐：
关于this.setState()的那些事

2020年08月30日更新

视频笔记

如何实时获取setState【异步转同步】

promise + async + await方式异步转同步

页面渲染

条件渲染

判断 ? 内容 : 内容【三元运算
判断 && 内容【如果前面的判断为true则渲染后面的内容

列表渲染

使用map遍历渲染（key：必须有，节省渲染资源，当内容改变了有key地方不会重绘）

表单

表单受控组件（推荐使用。缺点：如果有很多input需要每个都绑定）

获取DOM的方法：Ref

非受控组件（解决了受控组件的问题，input很多的时候使用）

状态提升

组件之间的数据交互【自己看文档】

组合/插槽

PropTypes类型检查

类型验证
必选项验证
默认值验证

【萌芽觉得规范的话还是推荐用typescript。

UI组件库

Antd

使用Fetch

解决跨域问题

第一种

在你的package配置文件中大括号内部，最底部设置你跨域的地址重新启动项目就可以了。（记得把请求里面的http路径头删掉

第二种（手动配置）

完美解决

这种方式是开发中是用的比较多的方式。

React-Router路由

根据页面路径的不同显示不同的组件，vue也一样都是采用单页模式切换。

HashRouter：采用的是锚点链接 #
BrowserRouter：采用的是h5新特性 / history.push （上线后需要后台配合做一些处理：重定处理404bug）

exact ：精准匹配
strict：严格模式（必须和exact一起）
<Switch>：表示页面只加载一次

react Hook

萌芽子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React学习笔记

React学习笔记React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。作为前端三大框架之一不会的小伙伴是时候学一学啦。这里萌芽只大概做个总结，新手小白的话可以去看看菜鸟教程，想深入了解的话可以去看官方文档，废话不多说，上干货！菜鸟教程：https://www.runoob.com/react/react-tutorial.html官方文档：https://react.docschina.org/docs/getting-started.htmlReact生命周期
复制链接

扫一扫