wxqyppqm
wxqyppqm

React_Docs_Quick Start_Notes

1. Installation

npm install --save react react-dom
Webpack as bundler
import React from 'react'; import ReactDOM from 'react-dom';

2. Hello World

ReactDOM.render(

hello world

document.getElementById('root') );

3. Introducing JSX

render里可以渲染element, function, class component

4. Rendering Elements

function tick() { //... ReactDOM.render( //... ); } setInterval(tick,1000);
回调函数的应用:
It calls ReactDOM.render() every second from a setInterval() callback.
setTimeout() 参数和setInterval()一样，但只执行一次，不存在周期概念。两个函数都是异步的。tick()作为参数传进来，它是个回调函数。AJAX动态加载，DOM事件，Node.js事件，链式调用也都用到了回调函数。

5. Components and Props

React_Docs_Quick Start_Notes_第1张图片
composing components

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen. All React components must act like pure functions with respect to their props.Such functions are called "pure" because they do not attempt to change their inputs, and always return the same result for the same inputs.

6. State and Lifecycle

1) Converting a function to a class:

  • Create an ES6 class with the same name that extends React.Component
  • Add a single empty method to it called render()
  • Move the body of the function into the render() method.
  • Replace props with this.props in the render() body.
  • Delete the remaining empty function declaration.

2) Adding local state to a class (move the data from props to state):

  • Replace this.props.date with this.state.date in the render() method:
  • Add a class constructor that assigns the initial this.state, pass props to the base constructor
  • Remove the date prop (} />)from the element. We will later add the timer code back to the component itself

3) Adding Lifecycle Methods to a Class:

componentDidMount() componentWillUnmount() These methods are called "lifecycle hooks". The componentDidMount() hook runs after the component output has been rendered to the DOM. This is a good place to set up a timer. If the Clock component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle hook so the timer is stopped.

React_Docs_Quick Start_Notes_第2张图片
Clock

7. Handling Events

React_Docs_Quick Start_Notes_第3张图片
Toggle Click

In Javascript, class methods are not bound by default. Without bind this.handleClick and pass it to onClick, this. will be undefined when the function is actually called. Generally, if you refer to a method without ( ) after it, such as onClick={this.handleClick}, you should bind that method.

React_Docs_Quick Start_Notes_第4张图片
bind( )

8. Conditional Rendering

React_Docs_Quick Start_Notes_第5张图片
class LoginControl
React_Docs_Quick Start_Notes_第6张图片
functions
  • For ReactDOM.render, we only put the class in it, which has its own render(), will rendering all <*Button /> and <*Greeting />. And all key value going to be used in render() well handled in constructor().
  • constructor() of will bind this to two handlers, and initialize the state of 'isLoggedIn' used as an condition check parameter, for deciding which <*Greeting /> or <*Button /> should be rendered .
  • We use this.setState (//preveStata) to change isLoggedIn. Whenever the button clicked, isLoggedIn will be re-assign a boolean value, then this boolean value also leads to <*Greeting /> changed. Consider why initial state assigned boolean false? how this boolean firstly works in render()? how <*Greeting /> initialized?how <*Greeting /> toggled by isLoggedIn as well? (It's all about the logic behind it)
  • Take care of 'let button = null' and {button}
  • Tried to remove function UserGreeting and GuestGreeting, works. And WITHOUT EXTRACTING & ENCAPSULATION，the code will be looks like this:
React_Docs_Quick Start_Notes_第7张图片
用handleToggleClick重做

9. Lists and Keys

map() 数组每个元素调用一个指定方法后，返回值组成新数组并返回；
forEach为数组中的每个元素执行一次回调函数。

  • Keys only make sense in the context of the surrounding array.
    For example, if you extract a ListItem component, you should keep the key on the elements in the array rather than on the root

  • element in the ListItem itself.

  • Keys Must Only Be Unique Among Siblings. Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays.

  • A good rule of thumb is that elements inside the map() call need keys.

10. Forms

React_Docs_Quick Start_Notes_第8张图片
Forms Picker

,