rayjune / odd Goto Github PK
View Code? Open in Web Editor NEW文章本天成,妙手【偶得】之
Home Page: https://odd.rayjune.me/
License: MIT License
文章本天成,妙手【偶得】之
Home Page: https://odd.rayjune.me/
License: MIT License
This one fires when the component first gets mounted to the DOM that is known as:
componentDidMout
This is something that we only have access to in our class based components.
There is no way to manage lifecycle for stateless functional components.
So this is actually another reason why stateless functional components are so fast
demo:
class AddOption extends React.Component {
constructor(props) {
super(props);
this.handleAddOption = this.handleAddOption.bind(this);
this.state = {
error: undefined
};
}
componentDidMount() {
console.log('mount');
}
componentDidUpdate(prevProps, prevState) {
console.log('update');
}
componentWillUnmount() {
// barely use, but it's important to know it exists
console.log('componentWillUnmount');
}
handleAddOption(e) {
e.preventDefault();
console.log('just a demo :)');
}
render() {
return (
<div>
{this.state.error && <p>{this.state.error}</p>}
<form onSubmit={this.handleAddOption}>
<input type="text" name="option" placeholder="存放一个小心愿把:)"/>
<button>添加</button>
</form>
</div>
);
}
}
google: react lifecycle
The stateless functional component suitable for simple presentational components.(especially without state)
They are faster than our class based components.
So when we can we should be using them there faster because they don't come with all of the overhead, and baggage of being a class and having to extend to react component(for example: state)
demo:
const User1 = () => {
return (
<div>
<p>Name: {this.props.name}</p>
{/*stateless functional components do not have access to `this` obviously are arrow functions do not either*/}
</div>
);
};
// so:
const User2 = (props) => {
return (
<div>
<p>Name: {props.name}</p>
</div>
);
};
ReactDOM.render(<User2 name={'RayJune'} />, document.getElementById('app'));
Whether it's a parent component or just some JSX that gets passed into react-done render.
We know that data props they flow in one direction
That allows us to pass things between components so the parents could pass some data
parentComponent -> childComponent
父子组件传递信息 -> props
自身组件控制 data change & re-render -> state
The || operator takes two arguments.
It also short-circuits; that is, if the first argument is truthy it does not evaluate the second.
about &&
render: true && <p>{app.subtitle}</p> => <p>{app.subtitle}</p>
React force React component's first letter must be uppercase.
It's what allows React to figure out if the thing we're trying to render is a component or an HTML element
For example, a React component called Header:
class Header extends React.Component {
// React.Component requie 1 method to be defined: render
render() {
return (
<div>
<h1>文章本天成,妙手偶得之</h1>
<h2>代码即诗歌</h2>
</div>
);
}
}
ReactDOM.render:
const rayjune = (
<div>
<Header />
<Action />
// react force component's first letter must be uppercase
// It's what allows react to figure out if the thing we're trying to render is a component or an HTML element
<header />
</div>
);
ReactDOM.render(rayjune, document.getElementById('app'));
and compiled code:
var rayjune = React.createElement(
'div',
null,
React.createElement(Header, null),
React.createElement(Action, null),
'// react force component\'s first letter must be uppercase // It\'s what allows react to figure out if the thing we\'re trying to render is a component or an HTML element',
React.createElement('header', null)
);
ReactDOM.render(rayjune, document.getElementById('app'));
React component state allows our components to manage some data.
So just think about an object with various key-value pairs , and when that data changes the component will automatically re-render to reflect those changes.
All we have to do is manipulate the data and the component is going to take care of re-rendering itself.
this.setState
can handle this situation:
demo MagicalCounter:
class MagicalCounter extends React.Component {
constructor(props) {
super(props);
this.handleAddOne = this.handleAddOne.bind(this);
this.state = {
count: 0
};
}
handleAddOne() {
// this.state.count += 1; can't re-render automatically
this.setState((prevState) => {
return {
count: prevState.count + 1
};
});
console.log(this.state.count);
}
render() {
return (
<div>
<h1>Magical Counter:{this.state.count}</h1>
<button onClick={this.handleAddOne}>+1</button>
</div>
)
}
}
ReactDOM.render(<MagicalCounter />, document.getElementById('app'));
ES5 solution: use that
to bind this
const user = {
name: 'rayjune',
cities: ['Hangzhou', 'Beijing', 'Shanghai'],
printPlacesLived: function () {
const that = this;
return this.cities.map(function (city) {
that.name + ' has lived in ' + city
});
}
};
console.log(user.printPlacesLived());
ES6 arrow function:
But this can't work,because arrow functions don't bind this
:
const user = {
name: 'rayjune',
cities: ['Hangzhou', 'Beijing', 'Shanghai'],
printPlacesLived: () => {
return this.cities.map((city) => this.name + ' has lived in ' + city);
}
};
console.log(user.printPlacesLived());
ES5(just more concise writing style) + ES6, :
This demo work because arrow functions don't bind this
:
// this keyword - no longer bound
const user = {
name: 'rayjune',
cities: ['Hangzhou', 'Beijing', 'Shanghai'],
printPlacesLived () {
return this.cities.map((city) => this.name + ' has lived in ' + city);
}
};
console.log(user.printPlacesLived());
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.