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() */
做你说过的 说你能做的;