react

1 react-native init myProject 2.修改App.js import React, { Component } from 'react'; import { Text, View } from 'react-native'; export default class HelloWorldApp extends Component { render() { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> <Text>Hello, Keny88888!</Text> </View> ); } } 代码定义了一个名为 HelloWorldApp 的新的 组件（Component） 。你在编写 React Native 应用时，肯定会写出很多新的组件。而一个 App 的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在 render 方法中返回一些用于渲染结构的 JSX 语句 3.react-native run-android 来源： CSDN 作者： keny-风清扬 链接： https://blog.csdn.net/keny88888/article/details/103760809

1.创建组件的方法 1.1Class类组件 React.Component 是以 ES6 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 React.Component 形式如下 //引入模块 import React from 'react'; //定义一个React组件 extends是继承 class App extends React.Component{ render(){ return ( <div> Hello，Reactjs！！ </div> ); } } //向外暴露 否则出不来 export default App; 在其他文件中引入组件 import React from 'react'; import ReactDOM from 'react-dom'; //App组件，组件要求大写字母开头 import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); 1.2Function函数组件 无状态函数式组件形式上表现为一个只带有一个 render() 方法的组件类，通过函数形式或者 ES6 箭头 function的形式在创建，并且该组件是无state状态的。具体的创建形式如下 import React from

React的 componentWillReceiveProps(nextProps) 生命周期 该方法当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用 使用好处：在这个生命周期中，可以 在子组件的render函数执行前 获取新的props，从而更新子组件自己的state。 可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。 于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。 来源： CSDN 作者： zy19960902 链接： https://blog.csdn.net/zy19960902/article/details/104080803

第一次接触React Hook是在9月份的一次面试中，当时面试官问我你知道Hook吗？我当时就是？？？（大家自行脑补表情包） 后来着急找工作，入职后刚开始也比较忙，渐渐都快忘记了这个事了。以至于React中文版中加了Hook之后一段时间我才看这个。 下面记录一些看了官方文档自己的一些记录及见解： stateHook ： 在没有hook之前 无状态组件就是指函数组件，但是有了hook之后赋予了函数组件处理state的功能，其核心目的是为了状态处理逻辑的复用（在以前通常是用HOC和render props实现，个人一般是用HOC）。 stateHook的使用也是比较简单的： const HookTest:SFC = () => { const [count, setCount] = useState(0);// 通过useState函数创建函数的state及state的处理函数 return ( <div> <div>{count}</div> <button onClick={() => setCount(count + 1)}>增加</button> </div> ) } 下面介绍useState方法： 观察useState的typeScript声明文档： 可以看到useState接受一个任意类型的参数，然后返回一个长度为2的数组，数组中的第一个值是state，第二个值是一个函数

Redux:不是react,更多的用在react里面，管理react应用中多个组件共享 Redux工作流程: 什么情况需要redux: 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用 某个组件的状态，需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 未拆分成redux的app.jsx import React,{Component} from 'react' export default class App extends Component{ state = { number:0 } Add = () =>{ // console.log(this.select.value); let count = this.select.value*1; let number = this.state.number; this.setState({number:number+count}); } Der = () =>{ // console.log(this.select.value); let count = this.select.value*1; let number = this.state.number; this.setState({number:number-count}); } Odd = () =>{ //

核心代码（如下），其实理解了核心思想很简单，刚开始被官方示例一大堆代码给蒙蔽了，哈哈。 const PrivateRoute = ({component:Component,...rest}) => { return ( <Route {...rest} render={props => window.localStorage.getItem('login') === '1' ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: "/logins", state: { from: props.location } }} /> ) } /> ) } <PrivateRoute path="/counter" component={Counter}></PrivateRoute> 官方示例 import React, { Component } from "react"; import { BrowserRouter as Router, Route, Link, Redirect, withRouter } from "react-router-dom"; //////////////////////////////////////////////////////////// // 1. Click the

React父子组件之间通讯，利用props和state完成，首先React是单向数据流，父组件可以向子组件传递props； 实现父子组件双向数据流整体的思路是： 1，父组件可以向子组件传递props，props中带有初始化子组件的数据，还有回调函数 2，子组件的state发生变化时，在子组件的事件处理函数中，手动触发父函数传递进来的回调函数，同时时将子组件的数据传递回去 图形表示的话：大概长这样 newState通过父组件的回调函数传递回去 下面是我自己写的一个便签实例： //Note组件代码： import React,{Component} from 'react'; import { render } from 'react-dom'; class EditPanel extends Component{ //子组件 constructor(props){ super(props); this.state=this.props.item;//通过props初始化编辑便签子组件的state this.handleEditFinish=this.handleEditFinish.bind(this); } handleEditFinish(e){ var date=new Date(); var newState={ content:e.target

React组件介绍 1.组件是React 的一等公民。使用React就是在用组件 2.组件表示页面中的部分功能 3.组合多个组件实现完整的页面功能 4.特点：可复用，独立，可组合 React组件的两种创建方式 1.使用函数创建组件 //函数组件：使用JS 的函数(或箭头函数)创建的组件 //约定1:函数名称必须以 大写字母开头 //约定2:函数组件 必须有返回值，表示该组件的结构 //如果返回值为null,表示不渲染任何内容 function Hello(){ return( <div>这是我的一个函数组件！</div> ) } 2.使用类创建组件 来源： https://www.cnblogs.com/foreverLuckyStar/p/12239105.html

react-router的3种按需加载介绍： https://blog.csdn.net/jackTesla/article/details/80792110 react-router的按需加载(推荐第三种) 第一种： 利用react-loadable这个高级组件，要做到实现按需加载这一点，我们将使用的WebPack，babel-plugin-syntax-dynamic-import和react-loadable。 webpack内置了对动态导入的支持; 但是，如果使用Babel（将JSX编译为JavaScript），那么将需要使用babel-plugin-syntax-dynamic-import插件。这是一个仅用于语法的插件，这意味着Babel不会做任何额外的转换。该插件只是允许Babel解析动态导入，因此webpack可以将它们捆绑为代码分割。 .babelrc: { “ presets ”：[ “ react ” ]，“ plugins ”：[ “ syntax-dynamic-import ” ] } react-loadable是用于通过动态导入加载组件的高阶组件。 import Loadable from 'react-loadable'; import Loading from './Loading'; const LoadableComponent =

本章讲解React高级部分内容，包含PropTypes，生命周期函数，虚拟Dom，数据mock，动画实现等部分课程讲解。 一. 1.1 类型校验和默认值。 1.2 什么是虚拟DOM 生成真正的DOM需要调用很多底层的东西，很耗性能，而且真实DOM的对比也很耗性能，而虚拟DOM则是JavaScript模拟的DOM，所以对于生成和对比，性能会很大程度上提高。 非虚拟DOM情况： 非虚拟DOM的进化： 1.3 React真实的DOM变化过程 1.4 虚拟DOM的优点： 性能提升了 它使得跨端应用得以实现。 如React Native ，因为生成的虚拟DOM在浏览器中被编译成真实DOM，而在原生应用中可能会被编译成其他的组件，所以可以实现跨端应用。 1.5 diff算法 两个虚拟DOM是怎么进行比对的呢？ 1.5.1 setState这个方法为什么是异步的呢？为了提升React的性能，比如你在很短的一段时间内多次setState，而内容又没有啥变化，那么React就会把这多次的setState合并成一个，这也是setState异步的初衷。 1.5.2 diff算法是逐 层比较的。如果第一层就不一样，那么下面的就不会再做比较了，直接替换掉新的。 1.5.3 K值的概念：k值一定要稳定，因为在diff算法的时候要进行比较的 在React循环渲染的时候，维护k值稳定性的重要性