react

react-组件间传参 父组件向子组件传参 父传子通过（props）属性向子组件的attr中传值 父组件 parent.js import React , { Component } from "react" ; import Child from "../child" ; export default class Parent extends Component { constructor ( props ) { super ( props ) ; this . state = { name : "zhangsan" , } ; } render ( ) { return ( < div > parent { /* 父组件通过props，向子组件attr属性把state中的值传给子组件 */ } < Child name = { this . state . name } / > < / div > ) ; } } 子组件Child.js import React , { Component } from "react" ; export default class Child extends Component { render ( ) { // 子组件通过props接受 let { name } = this . props ; return < div > 父组件传来的参数

目录结构（先创建好） 简单说明一下 下面有代码的直接粘贴复制 有些没有代码的 这里先解释一下 1.node_modules 这个文件夹没什么好说的 2.src 这个文件夹里面就是我们需要写的 （1）.src/component 这里一般都是方组件的 我没有写组件 所以这里空空如也 （2）.src/pages 这里放的就是打包的页面了 （3）.src/pages 里面pageinfo.json 这个文件是配置单独页面的一些seo之类的配置 不写的 生成模板是会有默认的 代码很简单 稍微看一下就明白 （4）.关于.scss文件 因为我现在就在用scss 所有这里就用scss 没有用 css上面的 有需要的可以自己配置下百度一下很简单 下面就是一些主要代码 希望能对在看此篇文章的你起到帮助作用 一、生成模板文件 //create-html.js const fs = require("fs"); const HtmlWebpackPlugin = require("html-webpack-plugin"); //生成html文件 const getPath = require("./get-path"); let htmlArr = []; function createHtml(page_path) { getPath(page_path).map((item) => { let

1、生命周期的概念 1.1、概念 在组件创建、组件属性更新、组件被销毁的过程中，总是伴随着各种各样的函数执行，这些在组件特定时期，被触发执行的函数，统称为组件的生命周期函数。 1.2、组件生命周期三个阶段 加载阶段（Mounting）： 在组件初始化时执行，有一个显著的特点：创建阶段生命周期函数在组件的一辈子中只执行一次； 更新阶段（Updating）： 属性和状态改变时执行，根据组件的state和props的改变，有选择性的触发0次或多次； 卸载阶段（Unmounting）： 在组件对象销毁时执行，一辈子只执行一次； 2、旧的生命周期 2.1、Mounting（加载阶段：涉及6个钩子函数） constructor() 加载的时候调用一次，可以初始化state getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性。 getInitialState() 初始化state，可以直接在constructor中定义this.state componentWillMount() 组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行 componentDidMount() 组件渲染之后调用，只调用一次 2.2

1、React组件化概念 1.1、组件的概念 React 应用都是构建在组件之上。 组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。 1.2、组件的特点 组件化的概念在后端早已存在多年，只不过近几年随着前端的发展，这个概念在前端开始被频繁提及，特别是在MV*的框架中。 前端中的“组件化”这个词，在UI这一层通常指“标签化”，也就是把大块的业务界面，拆分成若干小块，然后进行组装。 狭义的组件化一般是指标签化，也就是以自定义标签（自定义属性）为核心的机制。 广义的组件化包括对数据逻辑层业务梳理，形成不同层级的能力封装。 标准性 任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。 组合性 组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。 重用性 任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。 可维护性 任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解

现在已经进入了互联网时代，同时各种网站的前端也在发生着很大的变化，网页的展现形式已经不仅仅局限在单一的文字和图片上面，丰富的媒体活动也让网站变得更加的生动，这也就是为什么如今前端工程师这么吃香！不管即将毕业的计算机学生，以及想要转行的同学，怎么样去学习web前端呢，从事全栈web前端开发需要学习哪些知识呢？ 想从事web前端开发，只会HTML、CSS和JavaScript这三个要素是远远不够的。身为一个合格的前端工程师，除了技术能力，还要有沟通能力，应该懂得和上游的设计师以及产品经理之间的沟通，同时也应该和下游的服务器工程师进行相关的沟通。同时也不能仅仅把眼光局限在前端，一定要掌握相关的后端开发语言，尽量让自己熟悉各种和设计相关的基础知识。 现在前端开发基本是全栈工程师了，移动APP的流行也让前端所做的事情越来越多，学习当然也是越来越多，很多前端人员除了巩固html5、css3、java、jquery、bootstrap等知识，还在不断拓展其他的知识点，Vue，react，angular三大移动端框架越来越受欢迎，在掌握了相关技术的同时，还应该清楚的了解到各种浏览器的兼容问题，并且能够准确找到存在的问题。最好是可以熟练掌握各种修图的软件，这方面不会过度的要求设计师的水平，目的就是在这个多能的时代，光掌握编程是远远不够的。 同时掌握好相关的html5技术，也是为前端页面的设计提供方便

Effect Hooks 由俭入奢易，由奢入俭难。——司马光 之前通过class来编写Component，一些辅助的方法是通过componentDidMount, componentDidUpdate来实现。通过React的effect hook可以实现类似的功能。 比如现在在组件显示之前需要通过网络加载一下数据，还是通过之前用的users api来demo: import React, { useState, useEffect } from 'react'; export default function UserList () { const [users, setUsers] = useState([]); useEffect( () => { fetch('https://reqres.in/api/users') .then(res => res.json()) .then(data => setUsers(data.data)) .catch(e => console.log(e)); }, [] ); return (<ul>{users.map(u => <li>{u.email}</li>)}</ul>); } 这里传给useEffect第二个参数为一个空数组，这样就表示只需要在初始化的时候运行即可，不用每次render都调用。 参考阅读 https:/

antd问题集锦 介绍 Form--校验 Form--Radio antd--Tree组件默认选中和展开 介绍 从零开始搭建react项目，结合 antd 库进行开发，在还未了解其原理的情况下只照着官网的案例进行开发，难免会遇到很多问题，下面对遇到的问题做个总结，希望后期能深入对react和antd原理的理解和熟练，不再依赖各种百度寻找答案。 Form–校验 import React , { Component } from 'react' import { Form , Radio } from 'antd' class UserAddForm extends Component { handleSubmit = e => { e . preventDefault ( ) this . props . form . validateFieldsAndScroll ( ( err , values ) => { if ( ! err ) { console . log ( '创建用户表单内容' , values ) // 这里进行提交表单操作 } } ) } render ( ) { const { getFieldDecorator } = this . props . form return ( < div className = "user-add" > < Form

开源：ReactNative集成百度语音开源库， 在这篇文章中作者开源了一个ReactNative集成百度语音合成的组件库，今天通过查看Github上的关于开源react-native-baidu-vtts 的issues，有朋友提到了一个bug,并给出了具体报错 请问「java.lang.String com.wayne.baiduvoice.util.OfflineResource.getTextFilename()」为 null 是什么原因？ 12-26 16:37:12.311 14862-14885/com.anlint.weightapp E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules Process: com.anlint.weightapp, PID: 14862 java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.String com.wayne.baiduvoice.util.OfflineResource.getTextFilename()' on a null object reference at com.wayne.baiduvoice.VoiceUtils.getParams

就目前来看，微前端已经不是一个新话题了。随着越来越多的公司的深入研究，当前也提出了很多的解决方案。不过本文不是想要来介绍微前端，更想介绍项目如何一步步到达微前端架构的实际需求。 当然，也不排除有些项目在初期就需要微前端这样的架构，不过我一直相信，任何架构模式都是根据实际需求来构建的。为什么很多大公司投入那么多的精力去做这样一件事，更多的也是因为他们真正需要这样一种架构，甚至达到了不用会影响业务开发的可能。不过对于大部分企业，不太需要关注这一点。 事实上，无论是什么架构形式,都是为了项目能够更快的进行开发。 所以不难得出，ETC 原则 (Easier To Change ，易于修改) 贯穿始终。 对于 ToC 端应用而言，可能生存期只有 2，3 年就会结束或者重写。但是对于 ToB 端应用基本上是公司不关门之前都会持续开发和使用下去。当然很多 ToC 端应用提供的更多是服务而不是业务，他们更多的关注重点放在服务上而并非业务范畴。 单项目应用 对于后端开发而言，都是由单体应用开始的，但是对于前端开发，所谓单体应用的说法并不合适，所以我在这里把它叫做单项目应用。 对于一个刚刚开始的创业公司，是没有足够的人力储备以及代码实践。此时我们要做的就是利用脚手架开启项目进行开发。我们需要做的是做好代码规范，把代码写好。更多的考虑前端组件化与服务分离。 依赖注入

React & Redux 实战 Reminder Pro 项目（5 个视频） React & Redux 实战 Reminder Pro 项目 #1 项目搭建 「07:03」 React & Redux 实战 Reminder Pro 项目 #2 显示列表 「09:45」 React & Redux 实战 Reminder Pro 项目 #3 处理时间 「Pro」「04:23」 React & Redux 实战 Reminder Pro 项目 #4 删除 reminder 「Pro」「05:57」 React & Redux 实战 Reminder Pro 项目 #5 保存数据到 cookies（完结） 「Pro」「04:36」 来源： oschina 链接： https://my.oschina.net/u/2417355/blog/3168657