JS-20.React-01.md

React - 01

1. JSX介绍

   • 举例:const element = <h1>Hello, world!</h1>;

   • JSX中嵌入表达式：const element = <h1> Hello, { true ? '你好 ~！' : ''}</h1>

   • JSX本身是一个表达式，可以从函数中作为返回值

     function getGreeting(user) {
       if (user) {
         return <h1>Hello, {formatName(user)}!</h1>;
       }
       return <h1>Hello, Stranger.</h1>;
     }

   • JSX特定属性

     // 使用引号，来将属性值指定为字符串字面量
     // 需要注意的是，在react中css的 class 属性与es6的 class重名了，顾css采用className
     const element = <div className="test" tabIndex="0"></div>;
     
     // 也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
     const element = <img src={user.avatarUrl}></img>;

2. 元素渲染

   • 须有一个根节点，挂在React Dom

   <div id="root"></div>

   • 将React 元素渲染到根 DOM 节点中

   const element = <h1>Hello, world</h1>;
   ReactDOM.render(element, document.getElementById('root'));

   • React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

3. 组件 & Props

   • 函数组件：它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

     function App() {
       return <h1>你好</h1>;
     }
     ReactDOM.render(<App />, document.getElementById("root"));

   • 使用 ES6 的 class 来定义组件：

     class Welcome extends React.Component {
       render() {
         return <h1>Hello, {this.props.name}</h1>;
       }
     }

   • Props：父组件向子组件传值

     父组件 father 向子组件传递参数、方法

     import React from "react";
     import ReactDOM from "react-dom";
     // 父组件
     class Father extends React.Component {
       constructor(props) {
         super(props);
         this.state = {
           name: "zhangsan"
         };
       }
       render() {
         return (
           <Child
             name={this.state.name}
             onClick={() => {
               this.handleClick();
             }}
           />
         );
       }
       handleClick(e) {
         console.log(this); // father
       }
     }
     // 子组件
     class Child extends React.Component {
       render() {
         return <h1 onClick={this.props.onClick}> {this.props.name}</h1>;
       }
     }
     
     ReactDOM.render(<Father />, document.getElementById("root"));

     • 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

     • 函数组件传值：

       function UserInfo(props) {
         return (
           <div className="UserInfo">
             <Avatar user={props.user} />
             <div className="UserInfo-name">
               {props.user.name}
             </div>
           </div>
         );
       }

4. State & 生命周期

   • State：

     • 不要直接修改state，使用this.setState({comment: 'Hello'});

     • state的更新可能是异步的，因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。

       要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。

       // Correct
       this.setState((state, props) => ({
         counter: state.counter + props.increment
       }));
       

     • state的更新可能会被合并，当调用 setState() 的时候，React 会把提供的对象合并到当前的 state。

     • state数据通常会被叫做“自上而下”或是“单向”的数据流，除了拥有并设置了它的组件，其他组件都无法访问。组件可以选择把它的 state 作为 props 向下传递到它的子组件中。

   • 生命周期

     • componentDidMount：组件已经被渲染到 DOM 中后运行。

     • componentWillUnmount：当 DOM 中组件即将被删除的时候。