react 官方文档阅读总结

一、引入脚本代码

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

二、添加测试demo

 

2.1、html代码

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

2.2、脚本 type="text/babel"

let rootDom = document.getElementById('root');

/*
状态提升(Lifting State Up)
 * */
function practice9() {
    class Seconed extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {value: '除值'};
      }
    
      handleChange(e) {
          this.props.onChangeValue(e.target.value);
      }
      render() {
        return (
          <input onChange={this.handleChange}/>
        );
      }
    }
    class First extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {value: '除值'};
      }
    
      handleChange(val) {
        this.setState({value: val});
      }
      render() {
        return (
          <div>
              <Seconed  onChangeValue={this.handleChange}/>
              {this.state.value+5}
          </div>
        );
      }
    }
    
    ReactDOM.render(
        <First/>,
        rootDom
    );
    
}
/*
表单(Forms)
 * */
function practice8() {
    //受控组件(Controlled Components)
    class NameForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                inputValue: '',
                textareaValue: '',
                textarecValue: [],
            };
    
            this.handleChange = this.handleChange.bind(this);
            this.handlebChange = this.handlebChange.bind(this);
            this.handlecChange = this.handlecChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }
    
        handleChange(event) {
            this.setState({
                inputValue: event.target.value
            });
        }
        handlebChange(event) {
            this.setState({
                textareaValue: event.target.value
            });
        }
        handlecChange(event) {
            const news = this.state.textarecValue,val = event.target.value,index = news.indexOf(val);
            if(index === -1){
                news.push(val);
            }else{
                news.splice(index,1);
            }
            console.log(news);
            this.setState({
                textarecValue: news
            });
        }
        handleSubmit(event) {
            console.table(this.state);
            event.preventDefault();
        }
    
        render() {
            return(
                <form onSubmit={this.handleSubmit}>
                    <label>
                      Name:
                      <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
                    </label>
                    <label>
                        Content:
                        <textarea value={this.state.textareaValue} onChange={this.handlebChange} >
                            Hello there, this is some text in a text area
                        </textarea>
                    </label>
                    <label>
                      选项:
                      <select multiple={true}  value={this.state.value} onChange={this.handlecChange}>
                        <option value="grapefruit">Grapefruit</option>
                        <option value="lime">Lime</option>
                        <option value="coconut">Coconut</option>
                        <option value="mango">Mango</option>
                      </select>
                    </label>
                    <input type="submit" value="Submit" />
                    <div>{this.state.inputValue}</div>
                    <div>{this.state.textareaValue}</div>
                    <div>{this.state.textarecValue}</div>
                  </form>
            );
        }
    }
    ReactDOM.render(
        <NameForm/>,
        rootDom
    );
}
/*
列表(Lists) 和 键(Keys)
 * */
function practice7() {
    //map 遍历
    //输出新的数组
    const numbers = [1, 2, 3, 4, 5];
    const newDiv = numbers.map((number,index) => (
        <div key={index.toString()} index={index.toString()}>{index}:{number * 2}</div>
    ));
    ReactDOM.render(
        newDiv,
        rootDom
    );
}
/*
处理事件-条件渲染
 * */
function practice6() {
    function ActionLink() {
        const handleClick = e => {
            e.preventDefault();
            console.log(this);
        }
        return(
            <a href="#" onClick={handleClick}>
              Click me
            </a>
        );
    }
    class Toggle extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isToggleOn: true,
                isFirst:Math.random() > 0.5
            };

            // 这个绑定是必要的，使`this`在回调中起作用
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
            console.log(this);
            this.setState(state => ({
                isToggleOn: !state.isToggleOn
            }));
        }
        //条件渲染
        render() {
            return(
                <div>
                    <button onClick={this.handleClick}>
                    {this.state.isToggleOn ? 'ON' : 'OFF'}
                  </button>
                  {this.state.isFirst &&
                    <h2>
                      恭喜您获得二分之一概率的前半部分.
                    </h2>
                  }
                </div>
            );
        }
    }
    const element = (
        <div>
            <ActionLink/>
            <Toggle/>
        </div>
    );
    ReactDOM.render(
        element,
        rootDom
    );
}
/*
状态(State) 和 生命周期
 * */
function practice5() {
    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(
                <div>
            <h1>这是一个根据内部状态控制的时钟</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
            );
        }
    }

    ReactDOM.render(
        <Clock/>,
        rootDom
    );

}
/*
组件(Components) 和 属性(Props)
 * */
function practice4() {
    //”函数式(Functional)“组件
    function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
    }
    //ES6 的 class 组件  组合组件
    class Welcomeb extends React.Component {
        render() {
            return <Welcome name={this.props.name}/>;
        }
    }
    const element = (
        <div>
            <Welcome name="刘德华" />
            <Welcomeb name="周杰伦" />
        </div>
    );
    ReactDOM.render(
        element,
        rootDom
    );
}
/*
元素渲染更新
 * */
function practice3() {
    //时钟
    setInterval(function() {
        const element = (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {new Date().toLocaleTimeString()}.</h2>
            </div>
        );
        ReactDOM.render(
            element,
            rootDom
        );
    }, 1000);
}
/*
JSX 介绍
 * */
function practice2() {
    const name = 'JSX';
    let element = <h1 id="0" className={name}>{name} 介绍一号{2 + 2}!</h1>;
    if(Math.random() > 0.5) {
        element = <h1>{name} 介绍二号{2 + 2}!</h1>;
    }
    const element2 = React.createElement(
        'div', {
            className: 'greeting',
            a: 7
        },
        'Hello, world!',
        element
    );
    ReactDOM.render(
        element2,
        rootDom
    );
}
/*
hello world
 * */
function practice1() {
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        rootDom
    );
}

 2.3、脚本应用

/*
 * hello world 
 * @fn:practice1()
 */
/*
 * JSX 介绍
 * @fn:practice2()
 */
/*
 * 元素渲染更新
 * @fn:practice3()
 */
/*
 * 组件(Components) 和 属性(Props)
 * @fn:practice4()
 */
/*
 * 状态(State) 和 生命周期
 * @fn:practice5()
 */
/*
 * 处理事件
 * @fn:practice6()
 */
/*
 * 列表(Lists) 和 键(Keys)
 * @fn:practice7()
 */
/*
 * 列表(Lists) 和 键(Keys)
 * @fn:practice8()
 */
/*
 * 状态提升(Lifting State Up)
 * @fn:practice9()
 */