React

Presentation slides at [Builderscon 2018

React used to implement traverses with recursive calls.

Recursive calls cannot be interrupted.

Therefore, blocking the UI when it grows large.

That's why they're using fiber to make interruptions possible in React these days.

Very good explanation of what problems existed in the old implementation, how it was changed, and how it forced library users to change the way they wrote (e.g., asynchronous state updates).

Talk about prioritizing side effects.

User input events are high priority.

So if you do heavy processing there, the input is blocked and the user is uncomfortable.

Cutting out to low priority makes user input more comfortable.

Runs synchronously during expiration.

suspense

Error Boundary and Similar Mechanisms

Throwing Promises Instead of Errors

It is immediately caught inside the library and follows the parent link asynchronously.

You can only put out a loading if it takes a long time.

It's interesting and seems very important to reduce user stress, but it doesn't seem very dead yet.

Partial Reactization of existing projects

It looks good to start with this temp when making a new one.

Build the tool chain only after you feel the need to do so (when it becomes sufficiently complex).

onClick is received by handleClick

Props are read-only

I see. Separation of model and view.

To update the state, pass a function to this.setState that takes the previous state as an argument, creates a new state, and returns it.

Component called "Circle that changes color when clicked.

Too many things can be done in the browser without creating your own development environment, which makes it a hassle to create your own development environment, but it is also hard to develop all the time only in the browser. But that's not an option.

With SVG

JSX to write HTML-like things in JS code

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Conversion with Babel

This looks like it's for SVG files.

code:js

const e = React.createElement;

class LikeButton extends React.Component {

constructor(props) {

super(props);

this.state = { liked: false };

}

render() {

if (this.state.liked) {

return 'You liked this.';

}

return e(

'button',

{ onClick: () => this.setState({ liked: true }) },

'Like'

);

}

}

ReactDOM.render(

e(LikeButton),

document.getElementById('root')

);

console.log('OK')

code::

<svg width="100" height="100"　id="canvas">

<circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />

</svg>

code:js

handleClick(e) {

console.log("clicked");

this.setState(prevState => {

console.log(prevState);

return {

value: !prevState.value

};

});

}

---