A quick intro to React.js
Intro to React.js
View Slide
How a Chinese Companybuilt a 57-storey skyscrapersin 19 days?
ComposabilityEncapsulationReusabilityDeclarative FlexibilityPerformanceInteroperability
JSX
import React from "react";import ReactDOM from "react-dom";class App extends React.Component {constructor(props) {super(props);this.state = {todos: ['buy soy milk', 'call mom']}}render() {return ()}}const Todos = ({todos}) => {return ({todos.map(todo => {return })})};const TodoItem = ({todo}) => ({todo});const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);
Compiled
var App =(function(_React$Component) {_inherits(App, _React$Component);function App(props) {…}_createClass(App, [{key: "render",value: function render() {return React.createElement("div",null,React.createElement(Todos, {todos: this.state.todos}));}}]);return App;})(React.Component);var Todos = function Todos(_ref) {var todos = _ref.todos;return React.createElement("ul",null,todos.map(function(todo) {return React.createElement(TodoItem, {key: todo.replace(" ", ""),todo: todo});}));};var TodoItem = function TodoItem(_ref2) {var todo = _ref2.todo;return React.createElement("li", null, todo);};
Diff Algorithm
Level by Level* source http://calendar.perfplanet.com/2013/diff/
Components* source http://calendar.perfplanet.com/2013/diff/
List* source http://calendar.perfplanet.com/2013/diff/
Batching* source http://calendar.perfplanet.com/2013/diff/
Sub-tree rendering* source http://calendar.perfplanet.com/2013/diff/
Selective Sub-tree rendering* source http://calendar.perfplanet.com/2013/diff/
Component Lifecycle
MountingUpdate (new props or state)constructor()static getDerivedStateFromProps()render()componentDidMount()static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()UnmountingcomponentWillUnmount()Error Handlingstatic getDerivedStateFromError()componentDidCatch()
Props vs State
- Props StateCan get initial value from parent Component? Yes YesCan be changed by parent Component? Yes NoCan set default values inside Component? Yes YesCan change inside Component? No YesCan set initial value for child Components? Yes Yes
React-NativeReact-Native-WebReact-PrimitivesReact-SketchReact-360React-Native-Windows
Demo
Thanks!