Hero_孙
Hero_孙

react 学习

/**
 * @author shj
 * @file react index
 */
import React from 'react';
import ReactDOM from 'react-dom';
// hello world 显示
const name = 'shj';
const element = 
 react {name}
;

ReactDOM.render(
    element,
    document.getElementById('root')
  );
// 对象引用
class Person {
     constructor(name, age) {
         this.name = name;
         this.age = age;
     }
}
let p1 = new Person('张三', 12);
let ele  = (
    

        
 hello ,{p1.name}

    

);
ReactDOM.render(ele, document.getElementById('root'));
// 调用定时任务 元素渲染只能通过覆盖来实现
let msg = '秒表';
function times() {
    ele = (
      

    
react {msg}

    
 time: {new Date().toLocaleTimeString()}

    

    );
    ReactDOM.render(ele, document.getElementById('root'));
}
setInterval(times, 1000000);
// 组件与props
/**
 * 当 React 元素为用户自定义组件时，
 * 它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，
 * 这个对象被称之为 “props”。
 * 注意： 组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。
例如，
 代表 HTML 的 div 标签，而 
则代表一个组件，并且需在作用域内使用 Welcome。
 */
class Welcome extends React.Component {
    render() {
        return 
hello ,{this.props.name} 
;
    }
}
ele = ;
ReactDOM.render(ele, document.getElementById('root'));
/**
 * 我们调用 ReactDOM.render() 函数，并传入  作为参数。
React 调用 Welcome 组件，并将 {name: 'baidu'} 作为 props 传入。
Welcome 组件将 
Hello, baidu
 元素作为返回值。
React DOM 将 DOM 高效地更新为 
Hello, baidu
。
 */
// 组合组件
class App extends React.Component {
    render() {
        return (
            

                
                
                
            

        );
    }
}
ReactDOM.render(, document.getElementById('root'));
// 提取组件 将比较复杂的组件,拆分为多个小组件
function Comment(props) {
    return (
      

        

          {props.author.name}
          

            {props.author.name}
          

        

        

          {props.text}
        

        

          {(props.date)}
        

      

    );
}
class Avatar extends React.Component {
    render() {
        return (
            
                {this.props.user.avatarUrl}{this.props.user.name}
            
        );
    }
}
class UserInfo extends React.Component {
    render() {
        return (
            

                
                

                    {this.props.user.name}
                

    

        );
    }
}
class MyComp extends React.Component {
    render() {
        return (
            

                
            

            {this.props.comp.text}
            

            

            {(this.props.comp.date)}
            

            

        );
    }
}

let comp = {};
let user = {};
user.avatarUrl = 'aaa';
user.name = '无图';
comp.user = user;
comp.text = 'mytext';
comp.date = new Date().toLocaleTimeString();
ReactDOM.render(, document.getElementById('root'));
// 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

// state
class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {date: new Date()};
    }
    // 组件第一次被渲染时,挂载
    componentDidMount() {
        this.timerID = setInterval(
        () => this.tick(),
        1000
    );
    }
    // 组件被删除时,卸载
    componentWillUnmount() {
        clearInterval(this.timerID);
    }
    tick() {
        this.setState({
            date: new Date()
        });
    }
    render() {
        return (
            

                
Clock

                
 Time : {this.state.date.toLocaleTimeString()}

            


        );
    }
}
ReactDOM.render(
,
document.getElementById('root')
);

/**
 * 构造方法是唯一直接设置state的入口
 * 只能通过setState() 改变state state ='' 并不能改变
 * state除了拥有并设置了它的组件，其他组件都无法访问
 * 这通常会被叫做“自上而下”或是“单向”的数据流。
 * 任何的 state 总是所属于特定的组件，
 * 而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件
 */

class App1 extends React.Component {
    render() {
        return (
            

            
            
            
          

        );
    }
  }
// 每个 Clock 组件都会单独设置它自己的计时器并且更新它。
ReactDOM.render(
    ,
    document.getElementById('root')
  );
// 事件处理
class Buttons extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isOn: true};
// 为了在回调中使用 this ,必须绑定
        this.clicks = this.clicks.bind(this);
    }
    clicks() {
        this.setState(prevState => ({isOn: !prevState.isOn
        }));
    }
    render() {
        return (
            
        );
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
  );
  // 

  // 条件渲染
class Comp1 extends React.Component {
    render() {
        return (
            
 comp1 

        );
    }
}
class Comp2 extends React.Component {
    render() {
        return (
            
 comp2 

        );
    }
}

class Show extends React.Component {
    render() {
        if (this.props.flag) {
            return ;
        }
        else {
            return ;
        }
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
);
// 元素变量
class Login extends React.Component {
    render() {
        return (
            
        );
    }
}
class Logout extends React.Component {
    render() {
        return (
            
        );
    }
}
class LogController extends React.Component {
    constructor(props) {
        super(props);
        this.loginClock = this.loginClock.bind(this);
        this.logoutClock = this.logoutClock.bind(this);
        this.state = {flag: false};
    }
    loginClock() {
        this.setState({flag: true});
    }
    logoutClock() {
        this.setState({flag: false});
    }
    render() {
        const flag = this.state.flag;
        // let button;
        // if (flag) {
        //     button = ;
        // }
        // else {
        //     button = ;
        // }
        // return (
        //     

        //         
        //         {button}
        //     

        // );
        // 使用三目运算符
        return (
            

                {flag ? (
                
                ) : (
                )
                }
            

        );
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
);
/**
 * 在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。
    因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
 * 在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。
 * 若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。
 */

 // 列表
const arr = [7, 2, 3, 4, 5];
let arrItem = arr.map(number => 
  • {number}
    • );
ReactDOM.render(
    
      {arrItem}
    ,
    document.getElementById('root')
);
// key
class Numbers extends React.Component {
    constructor(props) {
        super(props);
        this.state = {item: props.items};
    }
    render() {
        let arrItem = this.state.item.map(number => 
  • {number}
    • );
        return (
            
      {arrItem}
    
        );
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
);
/**
 * key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识
 * 一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据 id 来作为元素的 key
 * 当元素没有确定 id 的时候，万不得已你可以使用元素索引 index 作为 key
 * 元素的 key 只有放在就近的数组上下文中才有意义。
 * 一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。
 * 数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的
 */
// key 会传递信息给 React ，但不会传递给你的组件
/**
 * 
    Post 组件可以读出 props.id，但是不能读出 props.key。
 */
// 在jsx 中使用 map()
class Number1 extends React.Component {
    render() {
        return (
            
      {this.props.items.map(number => 
    • {number}
      • )}
    
        );
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
);
// 受控组件
/**
 * 在 HTML 中，表单元素（如、