Previous projects used Vue, but can not be satisfied with the status quo, react also need to learn, so as to roll up 🤣

1. The JSX syntax

1.1 JSX annotation writing

Render (){return (<div> {// I am a comment}< h2> current count :{this.state.counter}</h2> <button onClick={this.increment.bind(this)}>+1</button> <button onClick={this.decremanet.bind(this)}>-1</button> </div> ) }Copy the code

1.2 JSX Embedded Variables (in braces)

  1. If the variable is Number, String, Arrary, it can be displayed directly
  2. When a variable is null, undefined, or Boolean, the content is empty
    1. If you want to display null, undefined, or Boolean, you need to convert it to a string
    2. Example :toSting() method, and empty string concatenation, Sting(variable) and so on

1.3 JSX binding Properties

//react vue v-bind (){const {imgUrl,link, Active} = this.state return (<div> {/* Bind attributes */} <img SRC ={getImg(imgUrl, 150)} Alt = "" / > < a href = target = {link}" __blank "> baidu about < / a > {/ * binding class * /} < div className =" aa bb "> hello < / div > < div className={ 'aa bb ' + (active ? 'active' : Dynamic binding ')} > < / div > < label htmlFor = "" > < / label > {binding style / * * /} < div style = {{color: 'red', fontSize: '50 px'}} > style style < / div > </div> ) }Copy the code

1.4 JSX binding events and this handling

  1. Dynamically bind this to the handler function
  2. Use arrow functions to define methods
  3. Pass in an arrow function directly and call the function you want to execute from the arrow function
class App extends React.Component{ constructor() { super(); This.btnclick = this.btnclick. bind(this)} render(){return (){this.btnclick = this.btnclick. bind(this)} render(){return ();  <div> {/* 1. Solution a: Bind this(explicit bind) */} <button onClick={this.btnClick}> button 1</button> <button OnClick ={this.btnclick.bind (this)}> button 2</button> {/* 2. <button onClick={this.btnClick1}> button 3</button> {/* 3. Option 3 (recommended): Just pass in an arrow function, <button onClick={()=>this.btnClick2(11)}> button 4</button> </div>)} btnClick(age){ console.log(this.state.message,age); } btnClick1 = (age)=>{ console.log(this.state.message,age); } btnClick2(age){ console.log(this.state.message,age); }}Copy the code

1.5 React Conditional rendering

React doesn’t have the same V-if for rendering as Vue, but react is more flexible

class App extends React.Component{ constructor() { super(); this.state = { isLogin:false, }} render(){const {isLogin} = this.state {// let welcom = null if(isLogin){ Welcom = 'welcome back ~'}else{welcom =' please login ~'} const isShow = isLogin? 'block' : 'none' return (< div > < h2 > < / h2 > {welcom} {/ * * logic and && v - if effect /} < h3 > {isLogin && 'welcome you... '}</h3> {isLogin && <h3> Welcome to... < / h3 >} {/ * v * - show effect /} < h2 style = {{display: isLogin? 'block' : 'none'}} > hello < / h2 > < h2 v - show effect style = {{display: IsShow}} > < / h2 > hello v - show effect {/ * * the ternary operator /} < button onClick = {() = > enclosing btnClick ()} > {isLogin? 'exit' : 'login'} < / button > < h2 > movie list < / h2 > {/ * circulation list * /} < ul > {this. State. Movies. Filter (item = > item. The length > 3) .map(item=><li>{item}</li>) } </ul> </div> ) } btnClick(){ this.setState({ isLogin:! this.state.isLogin }) } }Copy the code

2. The nature of JSX

2.1 JSX

  • JSX is actually just react. createElement(component.props,… The syntactic sugar of the children function
    • All JSX will eventually be converted to function calls to React. CreateElement
    • CreateElement requires passing three parameters
      • Parameter 1: type
        • The current type of createElement
        • If it’s a tag element, it’s a string for “div”
        • If it’s a component element, use the component name
      • Parameters of the two: the config
        • All properties in JSX are stored in Config as properties and values of objects
      • Three parameters: the children
        • The contents of the tag are stored as an array of children

3.2 Process of creating virtual Dom

  • React.createElement creates a ReactElement object
  • What does this ReactElement object do? Why did React create it
    • React uses ReactElement objects to form a JavaScript object tree
    • JavaScript’s object tree is known as the Virtual DOM
  • JSX – > createElement function – > ReactElement – > reactdom.render – > real DOM