![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
/*lemon*/
你很懒
展开
-
React系列-初始化React脚手架
xxx脚手架:用来帮助程序员快速创建一个基于xx库的模板项目包含了所有需要的配置(语法检查,jsx编译,devServer)下载好了所有相关的依赖项目的整体技术架构为:react+webpack+es6+eslint创建步骤:全局安装:npm install -g create-react-app切换到想创建项目的目录,使用命令:create-react-app hello-reactyarn start 启动服务yarn build 打包yarn test 测试原创 2021-08-24 12:02:06 · 133 阅读 · 0 评论 -
React系列-总结生命周期(新)
初始化阶段1. constructor()2. getDerivedStateFromProps3. render()4. componentDidMount()更新1. getDerivedStateFromProps2. shouldComponentUpdate()3. render()4. getSnapshotBeforeUpdate()5. componentDidUpdate()卸载组件1. componentWillUnmount()...原创 2021-08-24 11:42:26 · 109 阅读 · 0 评论 -
React系列-对比新旧生命周期
新生命周期中需要加UNSAFE_前缀(即将要废弃)的有:componentWillMount()componentWillReceiveProps()componentWillUpdate()提出2个新钩子:getDerivedStateFromProps()getSnapshotBeforeUpdate()//state的值在任何时候都取决于props,那么可以使用getDerivedStateFromPropsgetDerivedStateFromProps(){ //直译:从p原创 2021-08-24 09:55:38 · 135 阅读 · 0 评论 -
React系列-总结生命周期(旧)
初始化阶段 :由ReactDOM.render()触发–初次渲染1. constructor()2. componentWillMount()3. render()4. componentDidMount()–常用,一般在这个钩子中做一些初始化的事,例如开启定时器,发送网络请求,订阅消息更新阶段:由组件内部this.setState()或父组件render()触发1. shouldComponentUpdate()2. componentWillUpdate()3. render()–必须.原创 2021-08-18 17:51:01 · 53 阅读 · 0 评论 -
React系列-事件处理
通过onXxx属性指定事件处理函数(注意大小写)React使用的自定义(合成)事件,而不是使用的原生DOM事件——为了更好的兼容性React中的事件是通过事件委托的方式处理的(委托给最外层的元素)——为了高效通过event.target得到发生事件的DOM元素对象,也就是发生事件的元素正好是要操作的元素,可以不使用ref——勿过度使用Ref收集表单数据非受控组件:现用现取class Login extends React.component{ handleSubmit=e=&g.原创 2021-07-20 18:09:47 · 60 阅读 · 0 评论 -
React系列-组件三大属性(ref)
字符串形式的refclass Index extends React.component{ showData=()=>{ const {input1}=this.refs; alert(input1.value) } //debbuger; 可以打断点 render(){ return ( <div> <input ref="input1" typ原创 2021-07-20 18:06:35 · 181 阅读 · 0 评论 -
React系列-组件三大属性(props)
props的基本使用class Person extends React.component{ render(){ const {name,age,sex}=this.props; return ( <div> <ul> <li>姓名:{name}</li> <li>性别:{sex}<原创 2021-07-20 18:03:08 · 83 阅读 · 0 评论 -
React系列-组件实例的三大属性(state)
对State的理解一个组件的显示形态可以由内部数据状态和外部参数所决定,外部参数也就是props,而内部数据状态就是state。事件绑定事件名称以及调用方式的变化:onclick -> onClickonblur -> onBluronClick={demo()} //错误,因为这是直接调用语句,只是把demo()的返回值复制给了onClickonClick={demo} //正确,这样是属于指定函数名称,在事件发生时再去调用函数严格模式下,自定义函数中的this为u原创 2021-07-08 16:18:26 · 82 阅读 · 0 评论 -
React系列-类式组件
注意:在class的{ }区间内,只能写构造器、静态方法、静态属性和实例方法class关键字还是用原来的配方实现的,所以我们把class关键字称作语法糖class-使用extends实现子类继承父类//直接把父类看成原型对象class Person{ constructor(name,age){ this.name; this.age; }}//class类中,使用extends实现子类继承父类class Chinese extends Person{}...原创 2021-07-06 16:07:34 · 79 阅读 · 0 评论 -
React系列-类的基本知识以及注意点
ES6中class关键字,是实现面向对象编程的新形式function Person(name,age){ this.name=name; this.age=age;}const p1=new Person('王多多',18);原创 2021-07-02 11:37:23 · 191 阅读 · 0 评论 -
React系列-配置webpack设置根目录
modules.exports={ resolve:{ alias:{ '@':path.join(__dirname,'./src') //path.join(__dirname表示项目根目录,这样@就表示项目根目录中src这一层路径 } }}//使用方式如下,@符号表示'项目根目录-src'这一层目录import Hello from '@/components/Hello'...原创 2021-07-01 18:04:59 · 389 阅读 · 0 评论 -
React系列-创建函数式组件
创建组件的第一种方式:function Hello(){ return <h1>Hello</h1>; //或return null;}调用组件时,直接把组件的名称丢到页面上如果在一个组件中return一个null,则表示此组件什么都不渲染,在组件中,必须返回一个合法的JSX虚拟DOM元素props传送数据:传值:<Hello name="大黄"></Hello>接收数据:function Hello(props){ return原创 2021-06-14 20:54:41 · 364 阅读 · 0 评论 -
React系列-JSX中的语法注意事项
注释:多行注释:{/* */},单行注释:{ //}两个特殊的属性名:className替代class,htmlFor替代label中的for属性jsx创建的DOM必须有唯一的根元素进行包裹标签必须成对出现,单标签要有闭合原创 2021-06-14 20:46:24 · 66 阅读 · 0 评论 -
React系列-Vue和React中key的作用
v-for或map中,如果需要保存状态,最好加上key,防止状态紊乱;在React中需要把key添加给被forEach、map或for循环直接控制的元素原创 2021-06-14 20:37:24 · 71 阅读 · 0 评论 -
React系列-在JSX中如何写JS表达式
当我们需要在jsx控制区域内写js表达式时,则需要把js代码写到{}内,{}可以:渲染数字渲染字符串渲染布尔值为属性绑定值let obj={ name="Hello"}<h1 title={obj.name}>哈哈哈</h1>渲染jsx元素渲染jsx元素数组Tips: forEach与map的区别:forEach无返回值,而map则是将指定操作的结果放到新数组中并返回新的数组map中必须写return如果箭头函数右侧只有一行代码,则不用{},也原创 2021-06-14 19:13:44 · 472 阅读 · 0 评论 -
React系列-创建一个基本的webpack4.x项目
webpack基于node构建,支持所有nodeAPI和语法,webpack4.x,其中一个特性为约定大于配置,默认的打包入口文件路径是src->index.jsnpm init -y快速初始化项目在项目根目录创建src源代码目录和dist产品目录在src目录下创建一个index.html使用cnpm或npm安装webpack,运行cnpm i webpack webpack-cli -D(如果安装cnpm需要全局运行npm i cnpm -g)webpack4.x提供了约定大于配置,目的原创 2021-06-03 15:55:34 · 96 阅读 · 0 评论 -
React系列-虚拟DOM与Diff算法
虚拟DOMDOM本质:浏览器中的概念,用js对象表示页面元素,并提供一些操作元素的API虚拟DOM:是框架中的概念,用js对象来模拟页面中的DOM和DOM嵌套关系,API由程序员提供为什么要实现虚拟DOM?为了实现页面中DOM元素的高效更新如何实现DOM高效更新?按需更新,只重新渲染更新的数据所对应的页面元素DOM树:1.请求服务器的HTML代码2.先在内存中,渲染出一颗DOM树3.把DOM树呈现到页面上如何实现页面的按需更新?获取内存中的新旧DOM树,然后进行比对,得到需要被更新原创 2021-06-03 14:45:30 · 120 阅读 · 1 评论 -
React系列-react与vue的对比
模块化:是从代码的角度来进行分析的,把一些可复用的代码抽离为单个的模块组件化:是从UI界面的角度来进行分析的,把一些可复用的UI元素抽离为单独的组件组件化的好处:随着项目规模的不断扩大,手里的组件越来越多,把已写好的组件直接拿过来用,可以快速搭建页面,提高工作效率vue如何实现组件化:Vue.Component()/Vue.extends() /.vue文件(最常用,最普遍的方式)react中的组件化:没有vue这样的模板文件,react一切都是以js来表现的,要学习react,js要合格,es.原创 2021-06-02 17:59:41 · 56 阅读 · 0 评论 -
React系列-使用ES6展开运算符简化传递props过程
const dog={ name:'大黄', age:3, gender:'雄'}原创 2021-06-21 09:26:43 · 110 阅读 · 0 评论 -
React系列-将组件抽离为单独的.jsx文件
components-Hello.jsx创建并导出组件export default function Hello(props){ return <div>这是Hello组件</div>}导入Hello组件import Hello from './components/Hello.jsx'//默认如果不做单独的配置,不能省略.jsx后缀名...原创 2021-06-21 09:34:17 · 140 阅读 · 0 评论 -
React系列-配置webpack,从而在导入组件时,省略.jsx后缀名
在webpack.config.js文件导出的配置对象中,新增resolve节点:module.export{ resolve:{ extensions:['.js','.jsx','.json'] //表示这几个文件的后缀名可以省略不写 }}原创 2021-06-21 10:22:43 · 660 阅读 · 0 评论