Cet article parle principalement de ce à quoi vous devez prêter attention lors du développement de projets React. Si vous voulez savoir, cliquez dessus et lisons cet article ensemble maintenant
.
对react项目开发，我大概对它的知识点进行了分类，主要由以下几个部分组成。
import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main';
render(<Main />,document.getElementById('app'));import React,{ Component } from 'react';
export default class Main extends Component{
render(){ return (
<p>
组件
</p>
)
}
}父组件传给子组件靠props
import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
render(){ return (
<p>
<Child title="我是父组件"/>
</p>
)
}
}class Child extends Component{
render(){ return(
<h2>{this.props.title}</h2>
)
}
}
render(<Main />,document.getElementById('app'));子组件传给父组件靠事件 子组件传递给父组件的过程描述，父组件传递给子组件一个函数，子组件执行这个函数，然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值，进行相应的操作。
import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
constructor(props){ super(props); this.state = {
value:'init value'
}
}
render(){ return (
<p>
<p>{this.state.value}</p>
<Child onClick={(value)=>{this.setState({value:value})}}/>
</p>
)
}
}class Child extends Component{
render(){ return(
<button onClick={()=>this.props.onClick("子组件的值")}>点击传值</button>
)
}
}
render(<Main />,document.getElementById('app'));webpack的配置一般分为这么几个部分，entry、output、plugin、devServer、module等。 entry告诉webpack入口在哪。 output告诉webpack将来把文件打包到哪。 plugin代表一些其他的操作，如打开浏览器、文件压缩等处理。 devServer代表开发的时候启动一个本地服务器 module代表各种loader用来解析你的代码。
Un fichier de configuration Webpack courant est le suivant :
var webpack = require('webpack');module.exports = { entry:"./src/index.js", output:{ path:'public', filename:'bundle.js'
}, devServer:{ historyApiFallback:true, hot:true, inline:true
}, plugins:[ new webpack.DefinePlugin({ 'process.env.NODE.ENV': "development"
}), new webpack.HotModuleReplacementPlugin(), new OpenBrowserPlugin({ url: 'http://localhost:8080'
})
], module:{ loaders:[{ test:/\.js[x]?$/, exclude:/node_modules/, loader:'babel-loader', query:{ presets:['es2015','react','stage-1']
}
},{ test:/\.css$/, loaders:['style',css]
},{ test:/\.(png|jpg)$/, loader:"url-loader"
}]
}
}En réaction, la syntaxe es6 en général nécessite quelques connaissances. Pour réagir, certaines méthodes d'utilisation et d'écriture de base d'es6 sont répertoriées ici.
l'importation introduit quelque chose
import webpack from 'webpack';import React from 'react';import { Component } from 'react';La variable introduite à l'aide de "{}" est la variable du même nom qui doit exister dans ce fichier.
Les variables introduites sans "{}" sont les variables lancées par défaut d'exportation dans ce fichier, et les noms de variables peuvent être différents.
l'export lance quelque chose.
function a(){ console.log(1);
}let b = 1;export a;export b;export default a;L'exportation peut être lancée plusieurs fois et utilisée plusieurs fois.
Une seule valeur par défaut d'exportation peut être utilisée, ce qui signifie qu'elle sera lancée par défaut.
L'essence de la classe est un mot-clé qui déclare une classe. Sa signification d'existence est la même que var, let, const, function, etc.
Utilisation :
class Main{}extends représente l'héritage, utilisation :
class Main extends Component{}constructor représente le constructeur, super hérite des propriétés et des méthodes de la classe parent.
class Main extends Component{
constructor(props){ super(props)
}
}Divisée en trois états
Montage
Mise à jour
Démontage
Étape de montage – généralement à cette étape de life La fonction périodique ne sera exécutée qu'une seule fois
constructor()
componentWillMount()
componentDidMount()
render()
La phase de mise à jour – sera exécuté plusieurs fois
componentWillReceiveProps()
shouldComponentUpdate()
render()
componentDidUpdate()
Phase de démontage – période de démontage du composant
componentWillUnmount( )
Il s'agit de la fonction du cycle de vie des composants à ce stade. Il existait auparavant deux fonctions de cycle de vie appelées getDefaultProps et getInitialState.
Mais leur fonctionnalité est désormais remplacée par le constructeur.
Scénarios d'utilisation du cycle de vie des composants
constructeur
Une méthode d'utilisation courante est l'initialisation de l'état
constructor(props){
super(props);
this.state = {
value:''
}}componentWillMount
Effectuez quelques opérations d'initialisation. Ou effectuez un chargement de données. <code> <br/>componentWillMount(){ <br/>
this.fetchData(); <br/>} <br/>componentWillMount(){
componentWillMount(){ this.fetchData();
}render(){ return (
<p>123</p>
)
}
shouldComponentUpdate
<br/>componentWillUnMount(){ <br/>
clearInterval(this.timer); <br/>} <br/>componentWillUnmount
</ol>componentWillUnMount(){ <h2>
clearInterval(this.timer); </h2>} <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">常见的使用场景是，根据传递不同的props，渲染不同的界面数据。
项目比较复杂的情况下，一个页面的值发生变化，就要导致另一个页面的值发生改变，这样需要通过props的方式来告知对方，你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props，从而根据这个props进行相应的数据处理。</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>这个函数的返回值是一个布尔值。返回一个true。 返回一个false的情况下，它的的状态不会进行更新。
immutable.js
Partie demande de données
ajax
En réaction, vous pouvez utiliser l'objet XMLHttpRequest traditionnel pour effectuer des demandes de données.
var xhr = new XMLHttpRequest();
succès(xhr.responseText);
}
const Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => { return new Promise((resolve, reject) => { if(res){
resolve(res);
}else if(err){
reject(err);
}
})}promise est la méthode de requête de données proposée par es6. Actuellement, de nombreux navigateurs ne l'ont pas encore implémenté. Mais il existe des polyfills pour les promesses, comme blueBird.js
L'utilisation de base est : Promise object fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{ method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded'
}, mode: 'cors', body: "page=1&rows=10"
}).then(res =>{ console.log(res); return res.json()
}).then(res => { console.log(res);
})import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom';
export default class Main extends Component{
render(){ return(
<Router>
<p>
<Switch>
<Route path='/' component={page1}>
<Route path='/home' component={page2}>
<Route path='/age' component={page3}>
</Switch>
</p>
</Router>
)
}
}const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT";
export function addtask(task){
return {
type: ADD_TASK,
task
}
}
export function addContent(content){
return {
type: ADD_CONTENT,
content
}
}import { addtask,addContent } from 'actions';export function(state = '',action){
switch (action.type){ case ADD_TASK: return action.task; break; case ADD_CONTENT: return action.content; break; default: return state;
}
}actions
对react项目开发，我大概对它的知识点进行了分类，主要由以下几个部分组成。
import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main';
render(<Main />,document.getElementById('app'));import React,{ Component } from 'react';
export default class Main extends Component{
render(){ return (
<p>
组件
</p>
)
}
}父组件传给子组件靠props
import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
render(){ return (
<p>
<Child title="我是父组件"/>
</p>
)
}
}class Child extends Component{
render(){ return(
<h2>{this.props.title}</h2>
)
}
}
render(<Main />,document.getElementById('app'));子组件传给父组件靠事件 子组件传递给父组件的过程描述，父组件传递给子组件一个函数，子组件执行这个函数，然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值，进行相应的操作。
import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
constructor(props){ super(props); this.state = {
value:'init value'
}
}
render(){ return (
<p>
<p>{this.state.value}</p>
<Child onClick={(value)=>{this.setState({value:value})}}/>
</p>
)
}
}class Child extends Component{
render(){ return(
<button onClick={()=>this.props.onClick("子组件的值")}>点击传值</button>
)
}
}
render(<Main />,document.getElementById('app'));webpack的配置一般分为这么几个部分，entry、output、plugin、devServer、module等。 entry告诉webpack入口在哪。 output告诉webpack将来把文件打包到哪。 plugin代表一些其他的操作，如打开浏览器、文件压缩等处理。 devServer代表开发的时候启动一个本地服务器 module代表各种loader用来解析你的代码。
var webpack = require('webpack');module.exports = { entry:"./src/index.js", output:{ path:'public', filename:'bundle.js'
}, devServer:{ historyApiFallback:true, hot:true, inline:true
}, plugins:[ new webpack.DefinePlugin({ 'process.env.NODE.ENV': "development"
}), new webpack.HotModuleReplacementPlugin(), new OpenBrowserPlugin({ url: 'http://localhost:8080'
})
], module:{ loaders:[{ test:/\.js[x]?$/, exclude:/node_modules/, loader:'babel-loader', query:{ presets:['es2015','react','stage-1']
}
},{ test:/\.css$/, loaders:['style',css]
},{ test:/\.(png|jpg)$/, loader:"url-loader"
}]
}
}partie es6
<🎜>Dans React, vous devez généralement connaître une certaine syntaxe es6 Pour réagir, quelques méthodes d'utilisation et d'écriture de base. de es6 sont répertoriés ici. <🎜><🎜>importer et exporter<🎜><🎜>l'importation introduit quelque chose<🎜>import webpack from 'webpack';import React from 'react';import { Component } from 'react';其中使用“{}”引入的变量是那个文件中必须存在的变量名相同的变量。
不使用“{}”引入的变量是那个文件中export default默认抛出的变量，其中变量名可以不一样。
export抛出一个东西。
function a(){ console.log(1);
}let b = 1;export a;export b;export default a;其中export可以抛出多个，多次使用。
export default只能使用一个，表示默认抛出。
class的本质是一个申明类的关键字。它存在的意义和var、let、const、function等都是一样的。
使用方式：
class Main{}extends代表继承，使用方式：
class Main extends Component{}constructor代表构造函数，super是从父类继承属性和方法。
class Main extends Component{
constructor(props){ super(props)
}
}分三个状态
Mounting
Updating
Unmounting
Mounting阶段–一般在这个阶段生命周期函数只会执行一次
constructor()
componentWillMount()
componentDidMount()
render()
Updating阶段–会执行多次
componentWillReceiveProps()
shouldComponentUpdate()
render()
componentDidUpdate()
Unmountint阶段–组件卸载期
componentWillUnmount()
这就是现阶段的组件生命周期函数。之前还有两个生命周期函数叫 getDefaultProps 以及 getInitialState。
但是它们的功能现在被constructor代替。
组件的生命周期使用场景
constructor
常见的一个使用方式就是state的初始化
constructor(props){
super(props);
this.state = {
value:''
}}componentWillMount
进行一些初始化的操作。或者进行一些数据加载。 <br/>componentWillMount(){ <br/>
this.fetchData(); <br/>} <br/>
componentDidMount
常见场景就是数据请求
componentWillMount(){ this.fetchData();
}render
一个react组件中必须包含的函数，返回jsx语法的dom元素
render(){ return (
<p>123</p>
)
}componentWillReceiveProps
在props传递的时候，可以在render之前进行一些处理。不会触发二次setState。
只有一个参数。代表的是props对象
shouldComponentUpdate
有两个参数，分别代表props和state
必须返回一个true或者false。否则会语法报错。
在进行一些性能优化的时候非常有用
componentDidUpdate
组件加载完毕，进行某些操作
componentWillUnmount
最常见的场景，对组件附加的setInterval、setTimeout进行清除。 <br/>componentWillUnMount(){ <br/>
clearInterval(this.timer); <br/>} <br/>
常见的使用场景是，根据传递不同的props，渲染不同的界面数据。 项目比较复杂的情况下，一个页面的值发生变化，就要导致另一个页面的值发生改变，这样需要通过props的方式来告知对方，你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props，从而根据这个props进行相应的数据处理。
这个函数的返回值是一个布尔值。返回一个true。 返回一个false的情况下，它的的状态不会进行更新。
immutable.js
在react中，可以使用传统的XMLHttpRequest对象进行数据请求。
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onReadyStateChange = ()=>{
if (xhr.readyState == 4 && xhr.status == 200) {
sucess(xhr.responseText);
}
}
promise是es6提出的数据请求方式。目前很多浏览器还没有实现。但是有promise的polyfill，如blueBird.js
基本的使用方式是：Promise对象
const Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => { return new Promise((resolve, reject) => { if(res){
resolve(res);
}else if(err){
reject(err);
}
})}fetch的基本使用方式：
fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{ method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded'
}, mode: 'cors', body: "page=1&rows=10"
}).then(res =>{ console.log(res); return res.json()
}).then(res => { console.log(res);
})基本使用
import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom';
export default class Main extends Component{
render(){ return(
<Router>
<p>
<Switch>
<Route path='/' component={page1}>
<Route path='/home' component={page2}>
<Route path='/age' component={page3}>
</Switch>
</p>
</Router>
)
}
}actions
const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT";
export function addtask(task){
return {
type: ADD_TASK,
task
}
}
export function addContent(content){
return {
type: ADD_CONTENT,
content
}
}reducers
import { addtask,addContent } from 'actions';export function(state = '',action){
switch (action.type){ case ADD_TASK: return action.task; break; case ADD_CONTENT: return action.content; break; default: return state;
}
}Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
