この記事ではReactプロジェクトを開発する際に注意すべき点を中心に説明していますので、知りたい方はぜひクリックして一緒に読んでみてください
对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'));子组件传给父组件靠事件 子组件传递给父组件的过程描述，父组件传递给子组件一个函数，子组件执行这个函数，然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值，进行相应的操作。
一般的な webpack 設定ファイルは次のとおりです:
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'));React では、通常、いくつかの es6 構文を知っている必要があります。ここでは、es6 の基本的な使用法と記述方法をいくつか示します。
importは何かを導入します
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"
}]
}
}Export は複数回スローして複数回使用できます。
使用できるエクスポートのデフォルトは 1 つだけです。つまり、デフォルトでスローされます。
classの本質はクラスを宣言するキーワードです。その存在意味はvar、let、const、functionなどと同じです。
使用方法:
import webpack from 'webpack';import React from 'react';import { Component } from 'react';extends は継承を表し、使用方法:
function a(){ console.log(1);
}let b = 1;export a;export b;export default a;constructor はコンストラクターを表し、親クラスからプロパティとメソッドを超継承します。
class Main{}は3つの状態に分かれています
マウント
更新中
アンマウント
constructor()
componentWillMount()
componentDidMount()
render()
componentWillReceiveProps()
shouldComponentUpdate()
render() )
これは、この段階でのコンポーネントのライフサイクル関数です。以前は、getDefaultProps と getInitialState という 2 つのライフサイクル関数がありました。
しかし、その機能は現在コンストラクターに置き換えられています。
class Main extends Component{}
componentWillMount(){
This.fetchData(); <br/><br/><br/><br/>
class Main extends Component{
constructor(props){ super(props)
}
}constructor(props){
super(props);
this.state = {
value:''
}}
パフォーマンスの最適化を行うときに非常に便利です
componentWillUnMount(){
clearInterval(this.timer); <br/><br/><br/><br/>componentWillReceiveProps 解析
componentWillMount(){ this.fetchData();
}render(){ return (
<p>123</p>
)
}常见的使用场景是，根据传递不同的props，渲染不同的界面数据。 项目比较复杂的情况下，一个页面的值发生变化，就要导致另一个页面的值发生改变，这样需要通过props的方式来告知对方，你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props，从而根据这个props进行相应的数据处理。
成功(xhr.responseText);
}
}
promise
promiseはes6が提案するデータリクエストメソッドです。現在、多くのブラウザはこれをまだ実装していません。ただし、blueBird.js などの Promise 用のポリフィルはあります
基本的な使用法は次のとおりです: Promise オブジェクト
这个函数的返回值是一个布尔值。返回一个true。 返回一个false的情况下，它的的状态不会进行更新。
immutable.js
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);
}
})}redux はシンプルで実用的です
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);
})reducers
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;
}
}webpack
对react项目开发，我大概对它的知识点进行了分类，主要由以下几个部分组成。
一般的な webpack 設定ファイルは次のとおりです:
import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main';
render(<Main />,document.getElementById('app'));es6 部分
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;
}
}以上がReact プロジェクト開発について知っておくべきことは何ですか? React プロジェクト開発の具体的な事項 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
