React
-
React是一个用于构建用户界面的JavaScript库。
-
特点:
- 声明式设计-react采用声明范式,可以轻松描述应用
- 高效-React通过对DOM的模拟,最大限度减少与DOM的交互
- 灵活-React可以与已知库或框架很好地配合
- JSX-是对JavaScript语法的扩展
- 组件-通过React构建组件,提高代码的复用性
- 单向响应的数据流 - React实现了单向相应的数据流,从而减少了重复代码
-
React元素渲染
-
元素是构成React应用的最小单元,用于描述输出的内容
-
1. //将React元素渲染到跟DOM节点中,通过传递给ReactDOM.render()的方法将其渲染到页面上。第一个参数:组件 第二个参数:挂载到哪 2. ReactDOM.render(<App />, document.getElementById('root'));
-
-
JSX
-
javaScript语言的扩展,执行更快。遇到’<‘解析为html,遇到’{’,解析为javaScript
-
类型安全的,在编译过程中就能发生错误
-
使用JSX编写更加快速
-
用来声明React当中的元素
-
//代码中嵌套多个html标签,主要使用一个div元素包裹它。或者使用<Fragment>标签包裹 ReactDOM.render( <div> <h1>hello React</h1> <h2>hello World</h2> </div> );
-
假定创建hello_react.js,在html文件中引用,使用**<script type = “text/babel” src ="helloworld_react.js>**
-
-
定义组件
-
使用函数定义组件
function HelloMessage(props) { return <h1>Hello World!</h1>; }
-
使用ES6 class来定义组件
class Welcome extends React.Component { render() { return <h1>Hello World!</h1>; } }
-
自定义的React组件的首字母必须大小
-
父子组件的拆分:父组件可以直接向子组件传值,但是子组件不可以直接传递值给子组件
-
render() { return ( <Fragment> <div> //绑定this <input id ="test" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)}/> <button onClick={this.addList.bind(this)}>点击</button> </div> <ul> { this.state.list.map((item,index)=>{ return( //子组件的调用 <Demo1Item //向子组件传递值 key ={index+item} index ={index} /> ) }) } </ul> </Fragment> ); }
-
注意:标签的class属性,
-
绑定this的方法(必要的,绑定后才可以在回调函数中使用。不进行绑定this 会是undefined)
1.直接绑定 onClick={this.addList.bind(this) 2.构造方法绑定 constructor(props){ super(props) this.handleClick=this.handleClick.bind(this) } onClick={this.addList) 3.箭头函数(将函数的this绑定到其定义时所在的上下问) onClick={()=>this.addList()}
-
-
props
-
state与props的区别:props是不可变的,而state可以根据与用户交互来改变
-
可以通过组件类的defaultProps属性为props设置默认值
class HelloMessage extends Component{ render() { return( <h1>Hello {this.props.name}</h1> ) } } HelloMessage.defaultProps={ name :'JUJDE' }; //暴露组件 export default HelloMessage
-
可以在父组件上设置state,并通过在子组件上使用props将其传递到子组件上
//父组件 class WebSite extends React.Component { constructor() { super(); this.state = { name: "react", } } render() { return ( <div> //调用子组件Name,并向Name传递值 <Name name={this.state.name} /> </div> ); } } //子组件 class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } }
-
-
Propertypes:校验传递的值
-
保证我们的应用组件被正确调用。当向组件传入无效数据时,控制台会抛出警告
React.PropTypes.string.isRequired //字符串类型 不可为空 React.PropTypes.func //函数 React.PropTypes.node //可以被渲染的对象 numbers strings elements arrays React.PropTypes.elements // React元素 React.PropTypes.oneOf(['1','2']) //只接受限定的值 React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]) React.PropTypes.any.isRequired //不可为空的任意类型
-
-
React事件的处理
-
React元素的事件处理和DOM元素类似。但是有语法有一些不同
// html <button οnclick="addList()"> 点击 </button> //react <button onClick={addList}> 激活按钮 </button>
-
在React中不可以使用返回false的方式阻止默认行为,必须要使用preventDefault
//html <a href="#" οnclick="return false">点击</a> //React function addList() { function handleClick(e) { e.preventDefault(); console.log(''); } return ( <a href="#" onClick={handleClick}> 点击链接 </a> ); }
-
React点击事件bind(this)传递参数:
事件:this.handleClick.bind(this,要传的参数)
函数:handleclick(传过来的参数)
-