react

useState 经典案例: import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) } 此例子中, useState(0) 是最新的 hooks api; 语法: function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]; 其中 state 是他的值, setState 是用来设置值的函数, initialState 是初始值 useState-initialState 该初始值可以接受任何参数,但是记得当他接受为一个函数时,就变成了 Lazy initialization (延迟初始化) 该函数返回值即为initialState, const [count, setCount] = useState(0); const [count, setCount] = useState(()=>0); //

1 ReactJS 简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用， 就在2013年5月开源了 。 由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。 React 中文官网 2 前端三大主流框架 Angular.js ：出来最早的前端框架，学习曲线比较陡，NG1 学起来比较麻烦，NG2 开始，进行了一系列的改革，也开始启用组件化了；在 NG 中，也支持使用 TS（TypeScript）进行编程； Vue.js ：最火的一门前端框架，它是中国人开发的，对我们来说，文档要友好一些； React.js ：最流行的一门框架，因为它的设计很优秀； windowsPhone 7 7.5 8 10 3 来源： CSDN 作者： 不知所起 一往而深 链接： https://blog.csdn.net/weixin_42112635/article/details/104137968

原文： https://www.cnblogs.com/lyraLee/p/10931721.html 语法糖字面意思是语法+糖(美化)。 其实就是在编译结果不变的情况下，为了达到某种目的（使代码简洁，使语义自然，使更接近面向对象编程等...），改变代码的书写方式，使达到目的。 常见的语法糖有： 1. ES6中的 class(更像面向对象编程的语法) ES6 的 class 可以看作是ES5中构造函数的另一种写法。而且class去检测类型就是function。 class A {} console.log(typeof A) // "function" 它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 2. react中的jsx语法（使代码简洁）。其实是React.createElement(component, props, ...children)的语法糖。 <MyButton name="hello">world</MyButton> 相当于 React.creatElement("MyButton", {name: "hello"}, 'world'); 来源： https://www.cnblogs.com/reclusive/p/12250853.html

React组件复用 思考：如果两个组件中的部分功能相似或相同，该如何处理？ 处理方式：复用相似的功能（函数封装） 复用什么？1.state 2.操作state的方法（组件状态逻辑） 两种方式：1.render props模式 2.高阶组件（HOC) 注意：这两种方式不是新的API,而是利用React自身特点的编程技巧，演化而成的固定模式（写法） render props模式 思路分析 思路：将要复用的state和操作state的方法封装都一个组件中 问题1:如何拿到该组件中复用的state? 在使用组件时，添加一个值为 函数的prop.通过函数参数 来获取（需要组件内部实现） 问题2:如何渲染任意的UI? 使用该函数的返回值作为要渲染的UI内容（需要组件内部实现） <Mouse render={(mouse)=>( <p>鼠标当前位置{mouse.x},{mouse.y}</p> )}/> 使用步骤 1.创建Mouse组件，在组件中提供复用的状态逻辑代码（1，状态 2，操作状态的方法） 2.将要复用的状态 作为props.render(state)方法的参数，暴露到组件外部 3.使用props.render() 的返回值作为要渲染的内容 //创建Mouse组件 class Mouse extends React.Component{ //鼠标位置 state state={ x:0

1 什么是混合移动App开发 1、苹果上的软件是如何开发出来的：使用的是 OC、或者使用 Swift 这门语言。 2、安卓平台上的软件又是如何开发出来的：使用安卓相关的语言开发的，Java，安卓的控件进行开发。 3、苹果和安卓平台上共有的软件是如何开发出来的：腾讯招两套开发人员【开发组】，手机京东。 4、前端移动 App（Application）开发技术，去开发手机端的应用程序。 5、前端的混合移动 App 开发技术，并没有使用 苹果 或 安卓 官方推荐的 开发平台和开发方式，而是抛弃了 官方提供的方式，使用 前端的独有的技术进行移动 App 开发体验。 什么是移动App开发 ：通俗的理解，就是把开发 Web 网站的技术（ HTML + CSS + JS ），通过某种方式，移植到移动 App 开发上进行使用，这种利用 Web 开发技术进行移动端开发体验的方式，叫做 混合移动App开发 ！ 1.1 关于移动App开发的几个概念 原生开发 ：它的英文单词是（NativeApp），指的就是使用 IOS、Android 官方提供的工具、开发平台、配套语言进行 手机App开发的方式； 混合开发 ：（HybirdApp）就是使用前端已有的技术，HTML + CSS + JS ，然后再搭配一些相关的打包编译技术，就能够开发出一个手机 App，安装到手机中进行使用； 什么是 App ：App是

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details. Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No online devices found. * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option

1、ref 　　//class 　　my_filter(reg){ 　　 const inpVal = this.input.value; 　　 console.log(inpVal); 　　　　 console.log(reg); 　　}; 　　//render 　　<input type="text" ref={input => this.input = input} defaultValue = 'helloworld!' /> 　　<button onClick = {this.my_filter.bind(this, reg)}> 确定 </button> 2、this.setState({}) 　　//class 　　this.state = { 　　　　inpVal : 'helloworld' 　　}; 　　 　　my_filter(e){ 　　 this.setState({ inpValu:e.target.value }) 　}; 　　//render 　　<input type="text" onChange={ this.my_filter.bind( this)} defaultValue={ this.state.inpValu} /> 来源： https://www.cnblogs.com/alchemist-z/p/12249003.html

组件的生命周期 意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能，分析组件错误原因等 来源： https://www.cnblogs.com/foreverLuckyStar/p/12247056.html

首先来看看什么是组件 当我们定义一个react组件的时候，我们看是怎么定义的，首先我们通过es6的写法定义了一个类。这个类继承了React下面的Component这个类。所以当一个类继承了React，Component这个类的时候，他就是一个react的组件了。所以当要去定义一个组件的时候，只要继承这个React下面Coponent这个类就可以了。接着往下看，这下面有个render方法，这个方法需要返回一个内容。我们说组件是页面的一部分，那么这个组件的内容由render函数决定，render函数返回什么，那么这个组件就返回什么内容。然后我们通过export default这种语法导出出去。 接下来谈谈组件两个相关的东西：state和props。 一、state state这个单词本来的意思是状态，在react中，它只是用来控制这个组件本身自己的状态，我们可以用state来完成对行为的控制、数据的更新、界面的渲染，由于组件不能修改传入的props，所以需要记录自身的数据变化。 setState不能直接给state赋值，state的更新需要运用到setState，给state赋值的确会更改state，具体流程是：当调用setState这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render

1、创建账号、项目初始化、推包 第一次发布自己的npm包 2、改造项目支持react 发布 react 组件到 npm 上 注意：编译jsx文件时注意项目要创建 .babelrc 配置,下面是babel7的编译 npx babel src --out-dir lib 下面是babel6的编译 babel app.js -d lib 如果没安装babel-cli使用下面指令 Babel6：编译 React jsx + ES6 简单入门 npm install -g babel-cli 3、源码展示 JavaScript实现拖动滑块验证 （1）目录结构 （2）源码展示 package.json { "name": "zzuwbin", "version": "3.0.3", "description": "wangbin", "main": "lib/app.js", "scripts": { "build": "webpack", "start": "webpack-dev-server --open" }, "author": "wangbin", "license": "ISC", "devDependencies": { "babel": "^6.23.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel