react-入门
发布时间:2020-12-15 20:29:44 所属栏目:百科 来源:网络整理
导读:基础认识 官网 特点 声明式编程 组件化 支持客户端和服务端渲染 高效 虚拟DOM,不总是直接操作DOM,只是减少DOM的操作,操作虚拟DOM不会对页面进行重绘,当渲染的时候,才会进行渲染 DOM Diff 算法,最小化页面重绘,就是当页面变化时,通过计算那部分需要重
基础认识
<div id="app"></div> <script src="js/react.development.js"></script> <script src="js/react-dom.development.js"></script> <script src="js/babel.min.js"></script> <script type="text/babel"> // 创建虚拟DOM元素对象 let vDom = <h1>react hello</h1> // 将虚拟DOM渲染到页面真实DOM容器中 ReactDOM.render(vDom,document.getElementById(‘app‘)) </script> JSX
// react直接操作和JSX操作对比 <script type="text/javascript"> const msg = ‘MSG content‘ const msgId = ‘App‘ // 创建虚拟DOM // const VDom1 = React.createElement(‘标签名‘,{id:‘xxx‘},‘内容‘) const vDom1 = React.createElement(‘h1‘, { id: msgId.toLowerCase() }, msg.toLowerCase()) // 渲染虚拟DOM ReactDOM.render(vDom1, document.getElementById(‘app1‘)) </script> <script type="text/babel"> // 创建虚拟DOM const vDom2 = <h2 id={msgId.toUpperCase()}>{msg.toLowerCase()}</h2>; // 渲染虚拟DOM ReactDOM.render(vDom2,document.getElementById(‘app2‘)) </script>
let arrs = [111,222,333,444] // 创建虚拟DOM const ul = ( <ul> { arrs.map((name,index) => <li key={index}>{name}</li>) } </ul> ) // 渲染虚拟DOM ReactDOM.render(ul, document.getElementById(‘app1‘)) 组件
// 工厂函数创建组件 function MyCom(){ return <h2>工厂函数创建组件</h2> } // 渲染组件标签 // <MyCom />必须这么写 // <MyCom>这么写是错误的 ReactDOM.render(<MyCom />,document.getElementById(‘app‘))
// class定义组件 class MyCom2 extends React.Component{ render(){ return <h3>class定义组件</h3> } } // 渲染组件标签 // <MyCom2 />必须这么写 // <MyCom2>这么写是错误的 ReactDOM.render(<MyCom2 />,document.getElementById(‘app‘)) 组件三大属性state
constructor(props){ super(props) this.state = { stateProp1:value1, stateProp2:value2 } }
this.state.statePropertyName
this.setState({ stateProp1:newValue1, stateProp2:newValue2 })
//定义组件 class Like extends React.Component{ constructor(props){ super(props) //初始化状态state this.state = { isShow:false } //将新增方法中的this强制绑定为组件对象 this.handleClick = this.handleClick.bind(this) } // 新添加的方法:内置的this默认不是组件对象,是一个undefined handleClick(){ //获取原始状态并取反 let isShow = !this.state.isShow // 设置状态 this.setState({isShow}) } // React.Component中本身就具有render函数,在class中只是重写组件类的方法render,所以这里的this指向没有问题 render(){ //获取状态 // const isShow = this.state.isShow const {isShow} = this.state //onClick是react的,区分原生的onclick // this.handleClick.bind(this)也可以,但是这种效率比较低,因为每次render都会执行一次bind进行绑定,而在constructor中只会在初始化的时候绑定一次 return <h1 onClick={this.handleClick}>{isShow ? ‘我是帅哥‘ : ‘帅哥是我‘}</h1> } } //渲染组件 ReactDOM.render(<Like/>,document.getElementById(‘app‘)) props
//创建组件 /* function Person(props) { return ( <ul> <li>姓名:{props.name}</li> <li>性别:{props.sex}</li> <li>年龄:{props.age}</li> </ul> ) } */ // class创建 class Person extends React.Component{ render(){ return ( <ul> <li>姓名:{this.props.name}</li> <li>性别:{this.props.sex}</li> <li>年龄:{this.props.age}</li> </ul> ) } } //属性默认值 Person.defaultProps = { sex:‘man‘, age:18 } //属性的类型和必填 Person.propTypes = { name:PropTypes.string.isRequired, age:PropTypes.number } const p1 = { name:‘nordon‘, sex:‘man‘, age:22 } // 渲染组件 // ReactDOM.render(<Person name={p1.name} sex={p1.sex} age={p1.age} />,document.getElementById(‘app‘)) ReactDOM.render(<Person {...p1} />,document.getElementById(‘app‘)) const p2 = { name:‘lisan‘ } ReactDOM.render(<Person name={p2.name} age={19}/>,document.getElementById(‘app2‘)) refs与事件处理
//定义组件 class MyInput extends React.Component { constructor(props){ super(props) this.handleClick = this.handleClick.bind(this) this.handleBlur = this.handleBlur.bind(this) } handleClick(){ let input1 = this.refs.inputValue console.log(input1.value) console.log(this.newInput.value) } handleBlur(event){ console.log(event.target.value) } render (){ return ( <div> <input type="text" ref="inputValue" /> <input type="text" ref={inputValue => this.newInput = inputValue } /> <button onClick={this.handleClick}>获取值</button> <input type="text" placeholder="失去焦点获取值" onBlur={this.handleBlur} /> </div> ) } } //渲染组件 ReactDOM.render(<MyInput/>,document.getElementById(‘app‘)) ToDolist
// 定义组件 // 组件状态的更改必须在当前组件中进行 class App extends React.Component{ constructor(props){ super(props) this.state = { todos:[‘111‘,‘222‘,‘333‘] } this.addTodo = this.addTodo.bind(this) } addTodo(todo){ let {todos} = this.state todos.unshift(todo) this.setState({ todos }) } render(){ const {todos} = this.state return ( <div> <h1>this is todolist demo</h1> <Add count={todos.length} addTodo={this.addTodo} /> <List todos={todos} /> </div> ) } } class Add extends React.Component{ constructor(props){ super(props) this.handleAdd = this.handleAdd.bind(this) } handleAdd(){ // console.log(this.refs.content.value); // <input type="text" ref="content" /> // console.log(this.newTodos.value); const data = this.newTodos.value if(!data){ return false; } this.newTodos.value = ‘‘ this.props.addTodo(data) } render(){ return ( <div> <input type="text" ref={inputValue => this.newTodos = inputValue} /> <button onClick={this.handleAdd}>按钮#{this.props.count + 1}</button> </div> ) } } Add.propTypes = { count:PropTypes.number.isRequired, addTodo:PropTypes.func.isRequired } class List extends React.Component{ render(){ let {todos} = this.props return ( <div> <ul> {todos.map( (item,index) => <li key={index}>{item}</li> )} </ul> </div> ) } } // name:PropTypes.string.isRequired, List.propTypes = { todos:PropTypes.array.isRequired } // 渲染组件 ReactDOM.render(<App/>,document.getElementById(‘app‘)) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |