Live: io-techin Tekniikkapodcast tänään perjantaina noin klo 15:00 alkaen. Keskustellaan viikon mielenkiintoisimmista tietotekniikka- ja mobiiliaiheista. Suora lähetys YouTubessa. Tule mukaan katselemaan ja keskustelemaan! Linkki lähetykseen >>
Ei ehkä nyt vielä. Nyt kelpaa vaikka hidas bruteforce, kunhan on tuollainen suosittu ja yleisesti käytetty kirjasto. Kauppamatkustaja -ongelma ei tule olemaan ainoa, että sorttauksia ja muitakin algoritmeja tullaan tarvitsemaan. Katsotaan sitten myöhemmin onko geneettisestä menetelmästä apua. Itse tykkään ennemmin formaaleista ratkojista.
No siis sanoisin että mikä tahansa geneerinen js kirjasto käy tämmöseen tähän hommaan.
Siis selaimessa pyörivä peli. Vuoropohjainen tosin, joten esimerkiksi AI-pelaajan siirrot voi hoitaa serverin puolella.No siis sanoisin että mikä tahansa geneerinen js kirjasto käy tämmöseen tähän hommaan.
Ihan mielenkiinnosta, miksi frontissa tällaisia pitää pyöritellä?
Tässä on vielä tulossa haastattelutehtäväkin, jossa suositellaan käyttämään/hyödyntämään valmiita kirjastoja. Siksi siis tuo kysely, että mikä olisi suosittu/hyvä algoritmi kirjasto. Turha tässä itse TSP:tä on koodata. Riittää kun tietää teorian, sitten vain soveltaa. Tässä vain ei jaksa ruveta hirveän paljon vertailemaan noita kirjastoja keskenään, vaan tarttis jo ruveta käyttämään niitä. Se nyt on selvää, että mikä kirjasto/paketti nyt tuleekaan käyttöön, niin TSP:n ratkoja pitää olla mukana.
<form onSubmit={handleSubmit}>
<input name="firstName" onChange={createHandler(setFirstName)} />
<input name="lastName" onChange={createHandler(setLastName)} />
<button type="submit">Submit</button>
</form>React.createElement(
"form",
{ onSubmit: handleSubmit },
React.createElement("input", {
onChange: createHandler(setFirstName),
name: "firstName"
}),
React.createElement("input", {
onChange: createHandler(setLastName),
name: "lastName"
}),
React.createElement("button", { type: "submit" }, "Submit")
);
Ei ole voit tehdä, kaikki asiat voi tehdät.
Mutta yksitellen et tule niitä lisään, koska homma on aikalailla kaikki tai ei mitään.
Kyllä se nyt vaan vähän on, koska implikoit ettet tiedä (modernista) web-kehityksestä mutta haluat silti tehdä asiat omalla tavallasi, koska se on olevinaan parempi tapa. Itse lähtisin siitä, että ensin asennetaan se vauvoille tarkoitettu peruspaketti kaikkine lisäominaisuuksineen, ja sitten kun aletaan ymmärtää, mitkä asiat siinä eivät sovi omiin projekteihin jne, niin sitten voidaan alkaa karsia.
No juu... Mutta jos haluaa töihinkin päästä niin sen oman tavan olisi hyvä motivoida vähän myös työnantajaa. Ei varmaan katsota hyvällä, jos koko tiimi käyttää jsx:ää ja yksi vetelee komponentit vanilla-Reactilla.
class MapView extends React.Component{
public props: {
startposition: number[];
}
constructor(startposition?: number[]=[0,0]){
super(startposition);
}
}
Silloin kun annat default valuen ([0, 0]), niin muuttujaa ei voi merkitä optionaliksi.
Palaan nyt vielä tähän. Ennen onnistui vissiin ilman tuota defaultprops staattista luokan jäsentä, mutta nyt siis sain haluamani seuraavalla tavalla
export interface IViewProps {
location: number[];
}
class MapView extends React.Component<IViewProps>{
public static defaultProps = {
location:[0,0]
};
constructor(startposition: IViewProps){
super(startposition);
}
}<li><MapView /></li>const MapView = ({ location = [0, 0] }: IViewProps) => {
// ...
};Dänks toimihan toi. Tosin tosta interacesta ei kuitenkaan pääse eroon. Koitin seuraavaa
const CityView=(location: number[]=[0,0]) => {interface IViewProps {
location?: number[];
}
const CityView=({location=[0, 0]}: IViewProps) => {
return(
<div className="CityView">
City at {location[0] + ", " + location[1] }
</div>
);
};No eikös sen pitäisi olla seuraavanlainen?
const CityView=(location: number[]=[0, 0]) => {
// ...
};<li><CityView /></li>
<li><CityView location={[5,2]}/></li><li><CityView {...[]}/></li>
<li><CityView {...[5,2]}/></li>const MapView = ({ location = [0, 0] }: { location?: number[] }) => {
return <div>{location.join(", ")}</div>;
};const MapView = ({ location = [0, 0] }) => {
return <div>{location.join(", ")}</div>;
};
async function handleSubmit(formValues){
try{
const terms = await acceptTermsDialog()
return await http('/api', {...formValues, terms})
}catch(e)
//TODO: handle errors rejected terms or failed http request
}finally{
// whatever
}
} "rules": {
"jsx-no-lambda": false
}import * as React from 'react';
import { Redirect,
RouteComponentProps,
withRouter
} from 'react-router-dom';
import {fakeAuth} from './../App'
const AuthButton = withRouter(({ history }) =>
fakeAuth.isAuthenticated ? (
<div>
Welcome!{" "}
<button
onClick={() => {
fakeAuth.signout(() => history.push("/"));
}}
>
Sign out
</button>
</div>
) : (
<p>You are not logged in.</p>
)
);(alias) withRouter<RouteComponentProps<any, StaticContext, any>, ({ history }: React.PropsWithChildren<RouteComponentProps<any, StaticContext, any>>) => JSX.Element>(component: ((({ history }: React.PropsWithChildren<RouteComponentProps<any, StaticContext, any>>) => JSX.Element) & React.ComponentClass<...>) | ((({ history }: React.PropsWithChildren<...>) => JSX.Element) & React.FunctionComponent<...>)): React.ComponentClass<...> & WithRouterStatics<...>
import withRouterMenisikö muodossa:
const AuthButton = withRouter(({ history }) => {
const signout = () => fakeAuth.signout(() => history.push("/"));
return (fakeAuth.isAuthenticated)
? (
<div>
{"Welcome! "}
<button
onClick={signout}
>
{"Sign out"}
</button>
</div>
)
: (
<p>{"You are not logged in."}</p>
)
});No kyllä vain menisi
. Dänks. Toi return -lauseen temppu olikin mielenkiintoinen. Onnistuisikohan tohon jopa switchin kaltainen useampi vaihtoehto?
Itse muuttaisin siten, että:No kyllä vain menisi
{
...
const renderSignOut = () => (<div>...</div>);
const renderSignIn = () => (<p>...</p>);
return (fakeAuth.isAuthenticated()) ? renderSignOut() : renderSignIn();
...
}Jossain tuli vastaan muutama (melko alkeellinen) React 360 showcase. Itse olen käynyt heittämässä kahdessa konffassa (Hki ja Berliini) esityksen aiheesta, mutta niissäkään ei ole mitään mullistavaa - vain perusteet.
const NewStatsTable = ({ headers, stats, data, dataType }) => {
const [cellHeights, setCellHeights] = useState([])
const tableRef = useRef(null)
useLayoutEffect(() => {
handleCellHeightResize()
window.addEventListener('resize', handleCellHeightResize)
return () => window.removeEventListener('resize', handleCellHeightResize)
}, [])
const headersToUse = getHeaders(dataType)
const getData = (item, header) => {
if (header === 'gameDate') return formatDate(item[headersToUse[header].id])
return item[headersToUse[header].id]
}
const getTallestCellHeights = () => {
const rows = Array.from(tableRef.current.getElementsByTagName('tr'))
return rows.map(row => {
const fixedCell = row.childNodes[0]
return Math.max(row.clientHeight, fixedCell.clientHeight)
})
}
const handleCellHeightResize = () => {
setCellHeights(getTallestCellHeights)
}
const headerMarkup = () => (
<TableRow header>{headers.map(renderHeaderRow)}</TableRow>
)
const renderHeaderRow = (header, colIndex) => {
const text = headersToUse[header].headerText
const height = cellHeights[0]
return (
<TCell
key={header}
type='th'
data={text}
colIndex={colIndex}
cellHeight={height}
/>
)
}
const cellMarkup = () =>
data.map((row, rowIndex) => (
<TableRow key={row._id}>
{headers.map((header, colIndex) =>
renderRow(header, row, rowIndex, colIndex)
)}
</TableRow>
))
const renderRow = (header, row, rowIndex, colIndex) => {
const text = getData(row, header)
const height = cellHeights[rowIndex + 1]
return (
<TCell
key={header}
type='td'
data={text}
colIndex={colIndex}
cellHeight={height}
/>
)
}
return (
<Container>
<ScrollContainer>
<Table ref={tableRef}>
<TableHead>{headerMarkup()}</TableHead>
<TableBody>{cellMarkup()}</TableBody>
</Table>
</ScrollContainer>
</Container>
)
}Hups, sen pitäisi olla
return () => window.removeEventListener('resize', handleCellHeightResize)
Mountatessa taas se eventlisteneri pitäisi käsittääkseni sitten taas lisätä. Toinen asia on, että tapahtuuko unmounttausta resize -eventistä? En tosin oo expertti tässä, mutta tollasta tuli mun mieleen.Hups, sen pitäisi ollaEli siis, kun komponenti unmountaa, niin poistetaan myös event listener. Vai olenko käsittänyt jotain väärin?Koodi:return () => window.removeEventListener('resize', handleCellHeightResize)
Niin tai näin, ei toimi vaikka ottaisin koko rivin pois.
useLayoutEffect toimii kuten useEffect eli event listener lisätään aina mountatessa. Resize ei unmounttaa komponenttia eikä aja useEffectiä, mutta ajaa kuitenkin tuota handleCellHeightResizeä. useEffectin returnissa poistetaan resize event listener komponentin unmountatessa, jotta ei jää taustalle pyörimään viemään resursseja ja aiheuttamaan muistivuotoja.
state: { from: propsnew.location }Vastataas omaan löpinään, niin saadaan nosto ja sitten lisäksi korjattua omaa kysymystä.
class Login extends React.Component<RouteComponentProps> {component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
render?: ((props: RouteComponentProps<any>) => React.ReactNode);class Login extends React.Component<RouteComponentProps<any>>
Sen verran sain viimeviikolla selville että fakeAuth ja login saavat eri instanssit, eli this katoaa, jos käyttää renderpropsia component propsin sijaan. React-router githubissa mainittiin yhdestä match bugista joka tuon ehkä voisi aiheuttaa useRouterMatch returns new object on each render · Issue #7059 · ReactTraining/react-router Mutta tää siis vasta mutu asteella
