คำถามติดแท็ก ecmascript-6

หลังจากใช้เวลาในการเรียนรู้ทำปฏิกิริยาฉันเข้าใจความแตกต่างระหว่างกระบวนทัศน์หลักสองประการของการสร้างส่วนประกอบ คำถามของฉันคือเมื่อฉันควรใช้ที่หนึ่งและทำไม สิทธิประโยชน์ / การแลกเปลี่ยนของหนึ่งเหนือสิ่งอื่นคืออะไร? คลาส ES6: import React, { Component } from 'react'; export class MyComponent extends Component { render() { return ( <div></div> ); } } การทำงาน: const MyComponent = (props) => { return ( <div></div> ); } ฉันคิดว่าการทำงานเมื่อใดก็ตามที่ไม่มีสถานะที่จะจัดการโดยองค์ประกอบนั้น แต่มันคืออะไร? ฉันเดาว่าถ้าฉันใช้วิธีวงจรชีวิตใด ๆ มันอาจจะดีที่สุดที่จะไปกับองค์ประกอบตามระดับ

212 javascript  reactjs  ecmascript-6  redux 

ฉันมีฟังก์ชั่นที่ฉันพยายามที่จะแปลงไวยากรณ์ลูกศรใหม่ในES6 มันเป็นฟังก์ชั่นที่มีชื่อ: function sayHello(name) { console.log(name + ' says hello'); } มีวิธีให้ชื่อโดยไม่มีคำสั่ง var: var sayHello = (name) => { console.log(name + ' says hello'); } เห็นได้ชัดว่าฉันสามารถใช้ฟังก์ชั่นนี้หลังจากที่ฉันได้กำหนดไว้เท่านั้น สิ่งต่อไปนี้: sayHello = (name) => { console.log(name + ' says hello'); } มีวิธีการใหม่ในES6หรือไม่?

204 javascript  ecmascript-6  arrow-functions 

ฉันพยายามที่จะตรวจสอบว่ามีความแตกต่างใหญ่ระหว่างสองเหล่านี้นอกเหนือจากความสามารถในการนำเข้าexport defaultโดยเพียงทำ: import myItem from 'myItem'; และการใช้export constฉันสามารถทำได้: import { myItem } from 'myItem'; ฉันสงสัยว่ามีความแตกต่างและ / หรือใช้กรณีอื่นนอกเหนือจากนี้หรือไม่

204 javascript  ecmascript-6  es6-modules 

ขณะนี้ฉันกำลังใช้ ES6 ในแอป React ผ่าน webpack / babel ฉันใช้ไฟล์ดัชนีเพื่อรวบรวมส่วนประกอบทั้งหมดของโมดูลและส่งออก น่าเสียดายที่มีลักษณะเช่นนี้: import Comp1_ from './Comp1.jsx'; import Comp2_ from './Comp2.jsx'; import Comp3_ from './Comp3.jsx'; export const Comp1 = Comp1_; export const Comp2 = Comp2_; export const Comp3 = Comp3_; ดังนั้นฉันจึงสามารถนำเข้าจากที่อื่นเช่นนี้: import { Comp1, Comp2, Comp3 } from './components'; เห็นได้ชัดว่านั่นไม่ใช่ทางออกที่ดีมากดังนั้นฉันจึงสงสัยว่าถ้ามีวิธีอื่น ฉันดูเหมือนจะไม่สามารถส่งออกส่วนประกอบที่นำเข้าได้โดยตรง

201 javascript  ecmascript-6  webpack  babeljs 

ฉันยังไม่คุ้นเคยกับ ECMAScript 6 ฉันเพิ่งโคลน Repo Starter Kit repo ซึ่งใช้ ES6 สำหรับรหัสแอปพลิเคชัน ฉันประหลาดใจที่เห็นว่ามีการกำหนดค่า linter ให้ห้ามการใช้งานuse strictdirective ซึ่งฉันคิดว่าถูกแนะนำในจาวาสคริปต์ก่อน ES6 ดังนั้นประเด็นคืออะไร

200 javascript  ecmascript-6  strict  es6-modules 

module.exports = exports["default"]ก่อนที่บาเบลจะเพิ่มบรรทัด มันไม่ทำเช่นนี้อีกต่อไป สิ่งนี้หมายความว่าอย่างไรก่อนที่ฉันจะทำ: var foo = require('./foo'); // use foo ตอนนี้ฉันต้องทำสิ่งนี้: var foo = require('./foo').default; // use foo ไม่ใช่เรื่องใหญ่โต (และฉันเดาว่านี่คือสิ่งที่ควรจะเป็นมาตลอด) ปัญหาคือฉันมีรหัสจำนวนมากซึ่งขึ้นอยู่กับวิธีการใช้งาน (ฉันสามารถแปลงส่วนใหญ่เป็นการนำเข้า ES6 แต่ไม่ใช่ทั้งหมด) ทุกคนสามารถให้คำแนะนำเกี่ยวกับวิธีการทำงานแบบเก่าโดยไม่ต้องผ่านโครงการของฉันและแก้ไขปัญหานี้ (หรือแม้แต่คำแนะนำในการเขียน codemod เพื่อทำสิ่งนี้จะค่อนข้างลื่น) ขอบคุณ! ตัวอย่าง: การป้อนข้อมูล: const foo = {} export default foo ผลลัพธ์ด้วย Babel 5 "use strict"; Object.defineProperty(exports, "__esModule", { value: true …

195 ecmascript-6  commonjs  babeljs 

ฉันต้องทำสิ่งที่ชอบ: if (condition) { import something from 'something'; } // ... if (something) { something.doStuff(); } รหัสข้างต้นไม่ได้รวบรวม; SyntaxError: ... 'import' and 'export' may only appear at the top levelมันจะพ่น ฉันพยายามใช้System.importตามที่แสดงที่นี่แต่ไม่รู้ว่าSystemมาจากไหน เป็นข้อเสนอ ES6 ที่ไม่ได้รับการยอมรับหรือไม่? เชื่อมโยงไปยัง "การเขียนโปรแกรม API" จากบทความที่ทิ้งฉันไปหน้าเอกสารเลิก

194 javascript  module  ecmascript-6 

ในไฟล์ js ฉันใช้การนำเข้าแทนที่จะต้องการ import co from 'co'; และพยายามเรียกใช้โดยตรงโดย nodejs เนื่องจากมันกล่าวว่าการนำเข้าคือ 'คุณสมบัติการจัดส่งสินค้า' และการสนับสนุนโดยไม่มีการตั้งค่าสถานะรันไทม์ ( https://nodejs.org/en/docs/es6/ ) แต่ฉันได้รับข้อผิดพลาด import co from 'co'; ^^^^^^ SyntaxError: Unexpected token import จากนั้นฉันก็พยายามใช้บาเบล npm install -g babel-core npm install -g babel-cli npm install babel-core //install to babel locally, is it necessary? และดำเนินการโดย babel-node js.js ยังคงมีข้อผิดพลาดเดียวกันการนำเข้าโทเค็นที่ไม่คาดคิด? ฉันจะกำจัดมันได้อย่างไร

192 javascript  node.js  ecmascript-6  babeljs  package.json 

มารู้ว่าจากReact v15.3.0เรามีคลาสฐานใหม่ที่เรียกว่าPureComponentเพื่อขยายด้วยPureRenderMixinในตัว shouldComponentUpdateสิ่งที่ผมเข้าใจคือว่าภายใต้ฝากระโปรงนี้มีพนักงานเปรียบเทียบตื้นของประกอบฉากภายใน ตอนนี้เรามี 3 วิธีในการกำหนดส่วนประกอบ React: องค์ประกอบไร้สัญชาติที่ใช้งานได้ซึ่งไม่ขยายชั้นเรียนใด ๆ ส่วนประกอบที่ขยายPureComponentชั้นเรียน องค์ประกอบปกติที่ขยายComponentชั้นเรียน เมื่อก่อนเราเคยเรียกองค์ประกอบไร้สัญชาติว่าเป็น Pure Components หรือแม้กระทั่ง Dumb Components ดูเหมือนว่าความหมายทั้งหมดของคำว่า "บริสุทธิ์" ได้เปลี่ยนไปแล้วใน React ถึงแม้ว่าผมจะเข้าใจความแตกต่างขั้นพื้นฐานระหว่างสามเหล่านี้ผมยังไม่แน่ใจว่าเมื่อมีการเลือกสิ่งที่ นอกจากนี้สิ่งที่ส่งผลกระทบต่อประสิทธิภาพและการค้าของแต่ละ? อัปเดต : นี่คือคำถามที่ฉันคาดว่าจะได้รับการชี้แจง: ฉันควรเลือกที่จะกำหนดองค์ประกอบที่เรียบง่ายของฉันเป็นฟังก์ชั่น (เพื่อประโยชน์ของความเรียบง่าย) หรือขยายPureComponentชั้นเรียน (เพื่อประโยชน์ในการปฏิบัติงาน)? การเพิ่มประสิทธิภาพนั้นทำให้ฉันได้แลกเปลี่ยนกับความเรียบง่ายที่ฉันเสียไปจริงหรือเปล่า? ฉันจะต้องขยายComponentชั้นเรียนปกติหรือไม่เมื่อฉันสามารถใช้PureComponentเพื่อประสิทธิภาพที่ดีขึ้นได้หรือไม่?

189 javascript  reactjs  ecmascript-6 

ฉันได้รับข้อผิดพลาดนี้จาก ESLint: error Parsing error: The keyword 'const' is reserved จากรหัสนี้: const express = require('express'); const app = express(); const _ = require('underscore'); ฉันลองลบแล้ว node_modulesและติดตั้งแพ็กเกจ npm ทั้งหมดใหม่ (ตามที่แนะนำที่นี่ ) แต่ไม่มีประโยชน์

188 javascript  node.js  ecmascript-6  eslint 

ฉันสนใจถ้ามีข้อ จำกัด ใด ๆ กับประเภทของค่าที่สามารถตั้งค่าได้โดยใช้constใน JavaScript - ในฟังก์ชั่นเฉพาะ ถูกต้องหรือไม่ ได้รับมันใช้งานได้ แต่มันถือว่าเป็นการปฏิบัติที่ไม่ดีไม่ว่าด้วยเหตุผลใด? const doSomething = () => { ... } ควรกำหนดฟังก์ชั่นทั้งหมดด้วยวิธีนี้ใน ES6 หรือไม่ ดูเหมือนว่าจะไม่เป็นเช่นนี้ถ้าเป็นเช่นนั้น ขอบคุณสำหรับความคิดเห็นใด ๆ !

183 javascript  function  const  ecmascript-6 

ฉันยังใหม่กับการใช้คลาส ES6 กับ React ก่อนหน้านี้ฉันผูกเมธอดของฉันกับวัตถุปัจจุบัน (แสดงในตัวอย่างแรก) แต่ ES6 อนุญาตให้ฉันผูกฟังก์ชันคลาสกับอินสแตนซ์ของคลาสด้วยลูกศรอย่างถาวรหรือไม่ (มีประโยชน์เมื่อผ่านเป็นฟังก์ชั่นการโทรกลับ) ฉันได้รับข้อผิดพลาดเมื่อฉันพยายามใช้พวกเขาเท่าที่คุณสามารถทำได้ด้วย CoffeeScript: class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this? Am i just getting the syntax wrong? handleInputChange (val) => { console.log('selectionMade: ', val); } ดังนั้นถ้าฉันจะส่งผ่านSomeClass.handleInputChangeไปเช่นsetTimeoutมันจะถูกกำหนดขอบเขตให้กับอินสแตนซ์ของชั้นเรียนไม่ใช่windowวัตถุ

181 javascript  reactjs  ecmascript-6  babeljs  ecmascript-next 

ฉันมีวิดเจ็ตการแชทที่ดึงลำดับของข้อความทุกครั้งที่เลื่อนขึ้น ปัญหาที่ฉันกำลังเผชิญอยู่ในขณะนี้คือตัวเลื่อนยังคงอยู่ที่ด้านบนเมื่อโหลดข้อความ ฉันต้องการให้มันมุ่งเน้นไปที่องค์ประกอบดัชนีสุดท้ายจากอาร์เรย์ก่อนหน้า ฉันคิดว่าฉันสามารถสร้างการอ้างอิงแบบไดนามิกโดยผ่านดัชนี แต่ฉันก็ต้องรู้ว่าฟังก์ชั่นการเลื่อนแบบใดที่จะใช้เพื่อให้บรรลุ handleScrollToElement(event) { const tesNode = ReactDOM.findDOMNode(this.refs.test) if (some_logic){ //scroll to testNode } } render() { return ( <div> <div ref="test"></div> </div>) }

181 javascript  reactjs  ecmascript-6 

วิธีมาตรฐานในการเรียกใช้วิธีการคงที่คืออะไร ฉันสามารถคิดถึงการใช้constructorหรือใช้ชื่อของคลาสเองฉันไม่ชอบอันหลังเพราะมันไม่จำเป็น อดีตเป็นวิธีที่แนะนำหรือมีอย่างอื่นอีกหรือไม่ นี่คือตัวอย่าง (contrived): class SomeObject { constructor(n){ this.n = n; } static print(n){ console.log(n); } printN(){ this.constructor.print(this.n); } }

176 javascript  class  static  ecmascript-6  es6-class 

ฉันสร้างโครงการ ReactJS ด้วยcreate-react-appแพ็คเกจและใช้งานได้ดี แต่ฉันไม่สามารถค้นหาไฟล์และการกำหนดค่าของwebpack ได้ react-create-app ทำงานกับ webpack อย่างไร ไฟล์การกำหนดค่า webpack อยู่ที่ไหนในการติดตั้งเริ่มต้นด้วยcreate-react-app? ฉันไม่พบไฟล์การกำหนดค่าในโฟลเดอร์ของโครงการ ฉันยังไม่ได้สร้างไฟล์ปรับแต่งแทนที่ ฉันสามารถจัดการการตั้งค่าคอนฟิเกอเรชันกับบทความอื่น ๆ แต่ฉันต้องการค้นหาไฟล์ปรับแต่งแบบธรรมดา

174 javascript  reactjs  webpack  ecmascript-6  create-react-app