一天学习React入门后的千字基础总结
一天入门React学习心得
阅读前必读
本文写的仓促，算是一个学习笔记吧，算是一个入门级的学习文章。若是你刚刚入门，那么可能一些入门的视频可能更加适合你。但若是具有一些知识，好比Vue，那么视频就不适合了。建议看完本篇文章在脑海中过一遍映像，在去官网深读，和一些深刻文章，想来会有很是好的提高。css
“一个框架不是看几篇文章，写写Demo就能说本身会，熟悉。须要不断实践，踩坑，学习原理。多想才能掌握。我只是结合
- - QAQVue进行的React学习，只是冰山一角罢了。充其量只是API的搬运工。react
初始化项目
新手仍是推荐官方的脚手架，经过npx来进行项目的初始化一个demo项目。git
npx create-react-app 项目名称
复制代码
默认生成的目录状况下，项目的解构就是这样的。github
Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 20.6.15 14:21 public d----- 20.6.15 16:41 src -a---- 20.6.15 14:21 310 .gitignore -a---- 20.6.15 14:22 746 package.json -a---- 20.6.15 14:21 2884 README.md -a---- 20.6.15 14:22 526017 yarn.lock 复制代码
随后经过npm 或者 yarn 来将项目跑起来。执行shell后会自动打开一个浏览器，当看到localhost:3000渲染后。那么就能够开启React大门了web
# npm shell 命令
npm run start # yarn shell 命令 yarn start 复制代码
React元素渲染-JSX
在Vue中template模板获得大量的使用，只要你会写HTML那么应该难不倒你这个小机灵鬼。而React则是使用了在函数中直接返回DOM。看起来很是的神奇，也致使了一些小伙伴在入门的时候会有点摸不着头脑，可是若是有必定基础，在Vue中写过了Render 函数的话，我想上手起来仍是很是容易的。它看起来是下面这个样子的。其本质上就是一个createElement的过程。因此，将这种模板的渲染方式称之为JSX。shell
import React from 'react';
import './App.css'; function App() { return ( <div className="App"> <h1>你好呀</h1> <p>今天又是充满但愿的一天...</p> </div> ); } export default App; 复制代码
经过React的JSX模板引擎，最终将其渲染到DOM上npm
变量绑定
在Vue的模板中，经过{{}}两个花括号来声明约束，表示这个声明中的字段是一个js的值，而不是一个文本。在React则是使用了{}一个花括号来作约定。那么就能够在DOM中使用js了。下面是一个Class组件，将state的text值绑定在DOM的。json
class App extends React.Component {
constructor (props) { super(props) this.state = { text: '我是wangly19' } } updateText () { this.setState({ text: '我是帅气的wangly19' }) } render () { return ( <div className="App"> <p>我是一个动态的数据: {this.state.text}</p> <button onClick={ this.updateText.bind(this) }>更换</button> </div> ) } } 复制代码
条件渲染
在Vue中，若是须要动态的渲染一个节点，是经过v-if指令来实现的，在React中呢，可使用运算符来渲染元素。经过Vue来作一个对比吧。redux
“经过
- - QAQ&&(或)运算符来达到v-if的同样效果。数组
render () {
return ( <div className="App"> <p>我是一个动态的数据: {this.state.text}</p> {/* { <p v-if="true">2</p> } */} {true && <p>2</p>} </div> ) } 复制代码
“经过三元运算符能够来达到
- - QAQv-if和v-else同样的效果。
render () {
return ( <div className="App"> <p>我是一个动态的数据: {this.state.text}</p> {/* { <p v-if="true">2</p> } */} {true ? <p>true</p> : <p>false</p>} </div> ) } 复制代码
列表渲染
经过map方法来遍历一些基本数据结构的节点。
“经过数据结构自带的map能够遍历出
- - QAQvalue,index,key在return中返回节点信息。
事件处理
在JavaScript中，经过onClick来绑定一个事件。
<button onclick="activeBuff">激活按钮</button>
复制代码
而在jsx中，则是经过onClick属性，且后面加一个jsx渲染模板的方式。
“须要注意的是，
- - QAQClass组件下的this是不存在的，须要用户手动为方法绑定this，在调用的点击事件方法。
<button onClick={ this.activeBuff.bind(this) }>激活按钮</button> 复制代码
组件
众所周知，Vue和React都是组件化解决方案，那么在React中是如何建立一个组件的呢？在React新版本中，推出了React Hooks方案。因此如今主流的仍是Class组件和Function组件。
Class组件
Class组件的建立方式很是的简单，只须要建立一个Class类而且让它继承React.Component，在Render方法中return出JSX的模板。
同时经过构造函数，处理Props。而且声明state状态初始化一个对象,将Props挂载到super上。
class App extends React.Component {
constructor (props) { super(props) this.state = { } } // render函数 render () { return ( <div className="App"> <p>我是Class组件</p> </div> ) } } 复制代码
Function组件
随着React Hooks发布，开发的主流也渐渐的转入了函数组件，不过Class组件在旧项目中仍是会用的。因此都学习一下。对比Class组件，函数组件就很是的简单了。在函数内部返回一个render模板就OK了。以下：
import React from 'react'
function FunctionDemo () { return ( <div> 我是函数组件 </div> ) } export default FunctionDemo 复制代码
Class组件State状态
这里着重的开个单章，主要是Class组件中的State值更改，由于函数组件最好使用的是hooks，因此单拎出来主要解一下Class组件下State状态。在React不建议直接修改State的值，而是使用setState的方式更新状态。
this.setState({
default: '修改后的文件' }) 复制代码
一样的，setState后当前的值并不会直接改变。它是一个异步函数，在异步函数中能够拿到最新的状态。
若是须要进行计算值的累加，推荐使用的是经过函数的返回值形式。
“这里的原理相似
- - QAQVue的组件data的函数return方式。 若是使用对象方式的话，在多个setState使用的话会被后面的任务覆盖，从而直接执行一次
// no
this.setState({ index: this.state.index + 1 }); this.setState({ index: this.state.index + 1 }); // yes this.setState({ index: this.state.index + 1 }); this.setState({ index: this.state.index + 1 }); this.setState((prevState, props) => { return {quantity: prevState.quantity + 1}; }); 复制代码
组件通讯
组件通讯是开发中常常用到的功能，可谓是灵魂之一了。那么React的组件通讯是如何完成的呢？
子组件获取父组件的值 Props
经过Props可使子组件很是快捷的拿到父组件的传递过去的内容。
-
1.在子组件上添加属性名称和数据
<ClassDemo name="wangly19"></ClassDemo>
复制代码
-
2.在Class中使用Props
constructor (props) {
super(props) this.state = { defaultText: '我是默认的文字' } } 复制代码
-
3.使用
经过this.props.父组件绑定的属性名称
<p>{ this.props.name }</p> 复制代码
定义默认的Props属性
在Vue中能够定义Props的默认值，哪怕用户没有传递，就会显示默认Props中定义的内容。
ClassDemo.defaultProps = {
name: '我是默认的名称' // ... 参数列表 } 复制代码
子组件传递父组件
经过Props传递一个函数，当子组件须要改变父组件的值时，经过this.props.[函数]执行回调。
// 父组件
class App extends React.Component { constructor (props) { super(props) this.state = { childMessage: '2222222222222222' } } onPropChange (newVal) { this.setState({ childMessage: newVal }) } render () { return ( <div className="App"> <p>{ this.state.childMessage }</p> <ClassDemo onPropChange={ this.onPropChange.bind(this) }></ClassDemo> {/* <FunctionDemo></FunctionDemo> */} </div> ) } } 复制代码
import React from 'react';
class ClassDemo extends React.Component { constructor (props) { super(props) this.state = { defaultText: '我是默认的文字' } } changeText () { this.props.onPropChange('111111111111111') } render () { return ( <div className="App"> <button onClick={ this.changeText.bind(this) }>更改文本</button> </div> ) } } export default ClassDemo; 复制代码
生命周期
看了官方的生命周期介绍，挺简洁的。分别是组件模板选而后，已经准备就绪的时候，能够作组件加载后的一些逻辑操做，镇楼神图。
挂载
constructor
构造函数初始化，最早被执行，初始化State等等。
getDerivedStateFromProps
这是一个静态方法，须要在前面增长static的属性
render
渲染函数，返回渲染的内容，当页面产生更新也会触发该方法。
componentDidMount
组件挂载以后，这个时候组件已经挂载完毕了
更新
getDerivedStateFromProps
组件即将被更新，这里参数分别对应先后被修改的内容，经过返回一个布尔值告知是否须要更新视图。
render
当视图更新，那么Render也会从新更新
getSnapshotBeforeUpdate
getSnapshotBeforeUpdate在render以后componentDidUpdate以前输出，相似于中间件用来作一些捕获操做。
componentDidUpdate
getSnapshotBeforeUpdate，有三个参数prevProps，prevState，snapshot，表示以前的props，以前的state，和snapshot。snapshot是getSnapshotBeforeUpdate返回的值
constructor (props) {
super(props) this.state = {} console.log('1.constructor构造函数') } componentDidMount () { console.log('componentDidMount') Store.subscribe(() => { this.setState({}) }) } static getDerivedStateFromProps (nextProps, prevState) { console.log('getDerivedStateFromProps') console.log(nextProps, prevState) return true } getSnapshotBeforeUpdate (prevProps, prevState) { console.log(prevProps, prevState) return 'top: 200' } componentDidUpdate (prevProps, prevState, snapshot) { console.log(prevProps, prevState, snapshot) } componentWillUnmount () { console.log('componentWillUnmount') } changeText () { Store.dispatch({ type: 'changeName', value: '我是ClassDemo中修改的名字： wangly' }) } render () { console.log('3.render函数') return ( <div className="App"> <p>{ Store.getState().redux_name }</p> { this.state.redux_name } <button onClick={ this.changeText.bind(this) }>更改文本</button> </div> ) } 复制代码
卸载
componentWillUnmount
组件卸载，咱们能够清除一些定时器,取消网络请求。
组件插槽
插槽对于Vue来讲并非很陌生，在React中插入的节点会以Props的方式传递。能够经过pro1ps.children找到而且渲染出来。
// 父亲组件
<ClassDemo onPropChange={this.onPropChange.bind(this)}> <h1>插入的元素 </h1> </ClassDemo> // 子组件 <div className="App"> {this.props.children} <button onClick={this.changeText.bind(this)}>更改文本</button> </div> 复制代码
Router路由
路由对于SPA应用来说可谓是重中之重，没有它的话，那么这个页面也就不能成为应用，只能称之为页面。二者可谓天差地别。
安装react-router-dom --save
# shell
npm install react-router-dom --save 复制代码
建立路由模式
在Vue中都知道路由的mode有两种，一种是hash一种是history模式。分别以下,经过引入不一样的包来建立不一样的Router。
// histoty import { BrowserRouter as Router, Link, Route } from 'react-router-dom'; // hash import { Link, Route, HashRouter as Router } from 'react-router-dom'; 复制代码
建立一个简单的路由
经过as出来的Router包裹路由快，经过Link做为跳转的行为容器。这样一个基本的路由容器就完成。
“须要经过使
- - QAQRoute进行对组件的声明配置，才能被Link找到哦。
import React from 'react';
// histoty import { BrowserRouter as Router, Link, Route } from 'react-router-dom'; // hash // import { Link, Route, HashRouter as Router } from 'react-router-dom'; function Page1 () { return ( <h1>我是Page1</h1> ) } function Page2 () { return ( <h1>我是Page2</h1> ) } function Page3 () { return ( <h1>我是Page3</h1> ) } class App extends React.Component { constructor (props) { super(props) this.state = { } } render () { return ( <div className="App"> <Router> <ul> <li> <Link to="page1">Page1</Link> </li> <li> <Link to="page2">Page2</Link> </li> <li> <Link to="page3">Page3</Link> </li> </ul> <Route exact path="/page1" component={ Page1 }></Route> <Route exact path="/page2" component={ Page2 }></Route> <Route exact path="/page3" component={ Page3 }></Route> </Router> </div> ) } } export default App; 复制代码
路由传值
路由传递参数通常使用param和query参数。经过给to传递一个对象的方式来进行数据的传递。能够看到，向page1的路由上添加了一个:id表示须要传递param的id的值，同时声明了search的文本和state对象多种方式传递了参数。以便根据不一样的场景使用。
;<div className="App"> <Router> <ul> <li> <Link to={{ pathname: '/page1/10', search: '?roles=[10, 20]', state: { name: 'wangly19' }, }} > Page1 </Link> </li> <li> <Link to="page2">Page2</Link> </li> <li> <Link to="page3">Page3</Link> </li> </ul> <Route exact path="/page1/:id" component={Page1}></Route> <Route exact path="/page2" component={Page2}></Route> <Route exact path="/page3" component={Page3}></Route> </Router> </div> 复制代码
手动跳转
当你使用History路由的时候，某些时候须要主动的跳转道某个路由，这个时候又不能去触发节点行为，因此这个时候就能够经过API的方式，进行跳转。使用方式和Vue大差不差。
// 跳转页面
this.props.history.push(参数和to的内容像素) this.props.history.push('page1') // 重定向页面 this.props.history.replace('page2') 复制代码
固然还有hash的go方法。
Redux状态管理
Redux是相似于Vuex的一个全局状态解决方案，它的功能主要是用来存储公有全局状态。来方便管理一些共有配置参数，解决业务体积大，结构复杂的项目提供好的状态管理。
“若是项目不是特别须要，尽可能不去使用它。
- - QAQ
安装Redux
# shell npm install redux --save 复制代码
建立Store State
看到官方的Demo，是很是容易懂的。下面是官方的代码，一眼就能看出流程。
import { createStore } from 'redux'
/** * This is a reducer, a pure function with (state, action) => state signature. * It describes how an action transforms the state into the next state. * * The shape of the state is up to you: it can be a primitive, an array, an object, * or even an Immutable.js data structure. The only important part is that you should * not mutate the state object, but return a new object if the state changes. * * In this example, we use a `switch` statement and strings, but you can use a helper that * follows a different convention (such as function maps) if it makes sense for your * project. */ function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 default: return state } } // Create a Redux store holding the state of your app. // Its API is { subscribe, dispatch, getState }. let store = createStore(counter) // You can use subscribe() to update the UI in response to state changes. // Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly. // However it can also be handy to persist the current state in the localStorage. store.subscribe(() => console.log(store.getState())) // The only way to mutate the internal state is to dispatch an action. // The actions can be serialized, logged or stored and later replayed. store.dispatch({ type: 'INCREMENT' }) // 1 store.dispatch({ type: 'INCREMENT' }) // 2 store.dispatch({ type: 'DECREMENT' }) // 1 复制代码
-
建立Stoge
// 声明默认的State状态值
const modeStore = { redux_name: '我是Redux中声明的名称：wangly19' } // 声明Reducer const reducer = (state = modeStore, action) => { return state } // createStore import { createStore } from 'redux'; import reducer from './reducer' const store = createStore(reducer) export default store 复制代码
-
视图渲染
import Store from './index'
<p>{ Store.getState().redux_name }</p> 复制代码
-
触发更新行为dispatch
<button onClick={ this.changeText.bind(this) }>更改文本</button> // dispatch changeText () { Store.dispatch({ type: 'changeName', value: '我是ClassDemo中修改的名字： wangly' }) } 复制代码
前提是，须要对action的方法作一个声明。相似于Vuex的Action。
const reducer = (state = modeStore, action) => {
switch (action.type) { case 'changeName': const newState = {...state} console.log(state) newState.redux_name = action.value console.log(newState) console.log(state) return newState default: return state; } } 复制代码
-
监听变化。
“做为行为触发行为后更新视图的凭证。在组件注销时，注意销毁它哦。
- - QAQ
componentDidMount () {
/** * 回调函数 */ Store.subscribe(() => { console.log(Store.getState().redux_name) this.setState({}) }) } 复制代码
Hooks
“Hooks我准备写新的文章。
- - QAQ
总结
学习React不少都是以Vue的思路先入个门，不至于一问三不知。也明白了知其一而知其三。若是有基础那么学习起来其实并非很困难。可是它的文档并不如Vue的全面，且对于某些方面来讲。花了一天时间整理一些基本的学习东西
“若是以为对你有帮助，不妨点个赞哦。
- - QAQ
参考资料
- 1. Mybatis学习总结（一）——入门基础
- 2. Mongodb学习总结-1（基础入门）
- 3. mybatis学习总结——入门基础
- 4. Linux 基础入门学习总结
- 5. ATCA基础入门学习总结
- 6. React入门基础知识总结
- 7. react native入门及学习总结
- 8. React要点入门学习总结
- 9. React学习之坑（二）- 基础入门
- 10. React-Native 基础学习入门指南
- 更多相关文章...
- • XML 总结 下一步学习什么呢？ - XML 教程
- • Memcached入门教程 - NoSQL教程
- • Kotlin学习（一）基本语法
- • Kotlin学习（二）基本类型
-
每一个你不满意的现在，都有一个你没有努力的曾经。