2022年10月25日
React进阶篇——二、组件与服务器通信
摘要： 二、组件与服务器通信 1，组件挂载阶段通信 componentDidMount是调用服务器API最安全的地方，也是React官方推荐的进行服务器通信的地方。除了在componentDidMount，在componentWillMount中进行服务器通信也是比较常见的一种方式。 componentWi 阅读全文
posted @ 2022-10-25 15:15 Zoie_ting 阅读(31) 评论(0) 推荐(0) 编辑
React进阶篇——一、组件state
摘要： 一、组件state 1，设计合适的state state必须能代表一个组件UI呈现的完整状态集，代表一个组件UI呈现的最小状态集。 state必须能代表一个组件UI呈现的完整状态集又可以分成两类数据：用作渲染组件时使用到的数据的来源，用作组件UI展现形式的判断依据： class Hello exte 阅读全文
posted @ 2022-10-25 14:40 Zoie_ting 阅读(52) 评论(0) 推荐(0) 编辑
  2022年10月22日
React基础篇——十、自定义DOM属性
摘要： 十、自定义DOM属性 React 16 之前会忽略不是把的HTML和SVG属性，现在React会把不识别的属性传递给DOM。 React16之前： <div cust-attr="someting"></div>会被渲染成: <div></div> React 16渲染出来的节点： <div cus 阅读全文
posted @ 2022-10-22 17:13 Zoie_ting 阅读(73) 评论(0) 推荐(0) 编辑
React基础篇——九、Portals
摘要： 九、Portals React16的Portals特性让我们可以把组件渲染到当前组件树以外的DOM节点上。典型的应用场景是渲染全局的应用弹框，使用Portals后，任意组件都可以把弹框组件渲染到根节点上，以方便弹框的显示。 ReactDOM.createPortal(child,container) 阅读全文
posted @ 2022-10-22 17:10 Zoie_ting 阅读(117) 评论(0) 推荐(0) 编辑
React基础篇——八、错误处理
摘要： 八、错误处理 React16之前，组件在运行期间执行出错就会阻塞整个应用的渲染，只有刷新页面才能恢复应用。React16引入了新的错误机制 默认情况下，当组件抛出错误，整个组件就会从组件树卸载，避免整个应用崩溃 错误边界。能够捕获子组件的错误并对其做优雅处理的组件。可以是输出错误日志，显示出错提示等 阅读全文
posted @ 2022-10-22 16:23 Zoie_ting 阅读(87) 评论(0) 推荐(0) 编辑
React基础篇——七，render新的返回类型
摘要： 七，render新的返回类型 React16之前，render方法必须返回单个元素。现在，render支持两种新的返回类型：数组（有React元素组成）和字符串。 render() { return [ <li key="a">a</li>, <li key="b">b</li>, <li key= 阅读全文
posted @ 2022-10-22 15:53 Zoie_ting 阅读(123) 评论(0) 推荐(0) 编辑
React基础篇——六、表单
摘要： 六、表单 表单元素在React中自身维护一些状态，这些状态默认情况下是不受react控制的，这类状态不受react控制的表单元素称为非受控组件。 在React中，状态的修改必须通过组件的state，非受控组件有悖于这一原则，为了让表单元素的状态变更也能通过组件的state管理，React使用受控组件 阅读全文
posted @ 2022-10-22 15:45 Zoie_ting 阅读(39) 评论(0) 推荐(0) 编辑
  2022年10月21日
React基础篇——五、事件处理
摘要： 五、事件处理 驼峰命名法 React元素绑定事件要用{}包起来 在DOM事件中，处理函数返回false来阻止事件的默认行为，但在React事件中，必须显示调用对象的preventDefault方法来阻止事件的默认行为。如果必须使用DOM提供的原生事件，可以通过React事件对象的nativeEven 阅读全文
posted @ 2022-10-21 16:17 Zoie_ting 阅读(50) 评论(0) 推荐(0) 编辑
  2022年10月20日
React基础篇——四、列表和Keys
摘要： 四、列表和Keys 渲染列表数据是非常常见的场景，例如做一个展示用户的列表，需要根据获取的用户数据进行渲染列表。 class UserList extends Component { constructor() { this.state = { userList:[ { id: '23243', i 阅读全文
posted @ 2022-10-20 17:40 Zoie_ting 阅读(50) 评论(0) 推荐(0) 编辑
React基础篇——三、组件的生命周期
摘要： 三、组件的生命周期 只有类组件才有生命周期，函数组件没有生命周期 1，挂载阶段 被创建，执行初始化，并被挂载到dom，完成第一次渲染。依次调用： constructor 是es6 class的构造方法。接收一个props参数，props是从父组件传入的属性对象，如果父组件没有传入而组件自身定义了默认 阅读全文
posted @ 2022-10-20 17:39 Zoie_ting 阅读(40) 评论(0) 推荐(0) 编辑