jsx

很多人都利用GIT上的scratch3.0做开发，但是苦于有些定制需要个性化开发但是不知道如何动手。本篇文章来做好普及工作吧。 首先需要完成事项如下： 1.需要进行modal定义 2.新增窗口的UI界面 3.新增窗口逻辑页面 4.GUI的UI页面注册 5.gui逻辑页面注册 6.顶部菜单新增接口 下面我们就一步不来模拟，例如，我需要开发一个论坛功能。 第一步，modal定义 　　1.打开reducers/modals.js文件，修改如下： 　　　　1）找到约16行，新增以下代码 　　　　const MODAL_BBS = 'bbs'; 　　　　2.）找到约30行，新增如下代码 　　·　　[MODAL_BBS]: false 　　　　3）找到约96行，新增如下代码 　　　　const openbbs = function () { 　　　　　　return openModal(MODAL_bbs); 　　　　} 　　　　const closebbs = function () { 　　　　　　return closeModal(MODAL_bbs); 　　　　}; 　　　　4）找到末尾倒数第二行，新增代码 　　　　　　openbbs, 　　　　 closebbs 　　　　以上请注意逗号的使用 第二步，新增窗体的UI界面，详见附件 　　1）components/bbs/bbs.jsx

1、React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库 通过使用组件来告诉React我们希望在屏幕上看到什么。当数据发生变化时，React会高效的更新并重新渲染我们的组件 2、 render返回了一个React元素，这是一种对渲染内容的轻量级描述。大多数的React开发者使用了一种名为"JSX"的特殊语法， 语法<div/>会被编译成React.creatElement('div'); 3、 在JavaScript class中，每次你定义其子类的构造函数时，都需要调用super方法。因此， 所有含有构造函数的React组件中，构造函数必须以super(props)开头； 4、当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的state数据 提升至其共同的父组件 当中保存。之后父组件可以通过props将状态数据传递到子组件当中。这样应用当中所有组件 的桩体数据就可以更方便的同步共享了。 5、为了提高可读性，我们把返回的React元素拆分成了多行，同时在最外层加了小括号，这样JavaScript解析时候就不会 在return的后面自动插入一个分号从而破坏代码结构了； 6、因为DOM元素<button>是一个内置组件，因此其onClick属性在React中有特殊含义。而对于用户自定义的组件来说，命名就可以 由用户自己定义了

本系列将尽可能使用ES6（ES2015）语法。所以均在上节webpack的基础上做开发。 React是Facebook开发的一款JS库，因为基于Virtual DOM，所以响应速度快，以及支持跨平台。 （实际上，Virtual DOM在某些情况都会损耗一些性能在diff上，但相比其他MVVM框架比起来性能影响很少，同时大幅提升开发效率也是目前推荐的方式） 安装 安装React： npm i -S react react-dom 安装Babel： npm i babel-loader babel-preset-react babel-plugin-import -S HelloWorld import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); JSX JavaScript 的一种扩展语法。我们推荐在 React 中使用这种语法来描述 UI 信息。 JSX支持嵌入表达式：花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中 JSX是Javascript：比起 HTML, JSX 更接近于 JavaScript, React DOM 使用驼峰

写在前头 本文希望通过揭开一些 React 隐藏的技术细节, 来辅助对官方文档中某些概念的理解 读者可以将本文看做对官方文档的补充 行文方式我采用的是 提问-解答 的方式, 即先根据官方文档给出的使用规则, 提出问题, Why ? 然后我们根据实际的调试再来解答这个 Why, 最后系统的整理这些 Why 变成 How, 如果你们有更好的行文方式, 也欢迎留言讨论 另外为了阅读体验, 我不会粘贴过多的源码, 避免打断各位读者的思路. 正文 从 Hooks 一些使用限制来看背后隐藏的细节 一. Hooks 为什么只能写在 FCComponent ? React 怎么知道的 ? 其实没有什么黑魔法, React 在初始化的过程中会构建一个 ReactCurrentDispatcher 的全局变量用于跟踪当前的 dispatcher dispatcher 可以理解成一个 Hooks 的代理人 由于你在 FCC 外部执行 Hooks, 这时候要么 React 没有初始化, 要么就是 Hooks 无法关联到 ReactCurrentDispatcher, 大部分场景都是因为生命周期的错配而报错, 所以 React 也并不能百分百知道你的 Hooks 执行时机是否正确 二. React useState如何在没有 Key 的情况下只通过初始值来判断读写的是哪个 State ? 官方文档在关于

目前跨端开发比较热门的就是 React Native 和 Flutter 了，到底该选哪门技术似乎也快成了大前端圈的一个热门话题。对于web前端来说，基于web生态的 React Native 应该是一个更加顺畅而自然的选择；但 Flutter 让人动心的地方就是高性能和 跨端UI一致性。而 React Native 发展不太明朗和 Flutter 越发成熟的走势对比促使我从观望的心态转为加入 Flutter 。 这里主要就是记录一下学习 Flutter 的一些感想和看法： 包管理 布局和样式 json 状态管理 包管理 pubspec.yaml 文件的作用类似于 npm 的 package.json ，而yaml格式也比json方便。但是不能用命令行自动安装包却让习惯了npm的我觉得麻烦。因为Flutter 安装依赖包是这么一个流程： 打开 pub.dev 网站； 搜索需要的包，得到包的名称和版本； 把包名称和版本填入 pubspec.yaml ，最后才开始下载包。 我觉得应该直接命令行安装包，让它帮我们下载，名称版本自动写入 pubspec.yaml 。如果没有指定版本就是默认下载最新版本，因为很多时候我们并不想知道版本号，给我个能用的最新的版本号就ok了。 布局和样式 就和很多人想的一样，为什么不使用 jsx 或者 xml 格式进行布局，因为基于代码的方式看起来太不直观了