React

React

• React是一个用于构建用户界面的JavaScript库。

• 特点：

  1. 声明式设计-react采用声明范式，可以轻松描述应用
  2. 高效-React通过对DOM的模拟，最大限度减少与DOM的交互
  3. 灵活-React可以与已知库或框架很好地配合
  4. JSX-是对JavaScript语法的扩展
  5. 组件-通过React构建组件，提高代码的复用性
  6. 单向响应的数据流 - React实现了单向相应的数据流，从而减少了重复代码

• React元素渲染

  1. 元素是构成React应用的最小单元，用于描述输出的内容

  2. 1. //将React元素渲染到跟DOM节点中，通过传递给ReactDOM.render()的方法将其渲染到页面上。第一个参数：组件 第二个参数：挂载到哪
     2. ReactDOM.render(<App />, document.getElementById('root'));
     

• JSX

  1. javaScript语言的扩展，执行更快。遇到’<‘解析为html，遇到’{’，解析为javaScript

  2. 类型安全的，在编译过程中就能发生错误

  3. 使用JSX编写更加快速

  4. 用来声明React当中的元素

  5. //代码中嵌套多个html标签，主要使用一个div元素包裹它。或者使用<Fragment>标签包裹
     ReactDOM.render(
         <div>
         <h1>hello React</h1>
         <h2>hello World</h2>
         </div>
     );
     

  6. 假定创建hello_react.js，在html文件中引用，使用**<script type = “text/babel” src ="helloworld_react.js>**

• 定义组件

  1. 使用函数定义组件

     function HelloMessage(props) {
         return <h1>Hello World!</h1>;
     }
     

  2. 使用ES6 class来定义组件

     class Welcome extends React.Component {
       render() {
         return <h1>Hello World!</h1>;
       }
     }
     

  3. 自定义的React组件的首字母必须大小

  4. 父子组件的拆分：父组件可以直接向子组件传值，但是子组件不可以直接传递值给子组件

  5. 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>
             );
         }
     

  6. 注意：标签的class属性，标签的for属性属于javaScript的保留字。需要将class 写成className，for写成htmlFor。（不影响使用，但是控制台会报错）

  7. 绑定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

  1. state与props的区别：props是不可变的，而state可以根据与用户交互来改变

  2. 可以通过组件类的defaultProps属性为props设置默认值

     class HelloMessage extends Component{
         render() {
             return(
                 <h1>Hello {this.props.name}</h1>
             )
         }
      }
     HelloMessage.defaultProps={
         name :'JUJDE'
     };
     //暴露组件
     export default HelloMessage
     

  3. 可以在父组件上设置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:校验传递的值

  1. 保证我们的应用组件被正确调用。当向组件传入无效数据时，控制台会抛出警告

     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事件的处理

  1. React元素的事件处理和DOM元素类似。但是有语法有一些不同

     // html
     <button οnclick="addList()">
      点击
     </button>
     //react
     <button onClick={addList}>
       激活按钮
     </button>
     

  2. 在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>
       );
     }
     

  3. React点击事件bind(this)传递参数:

     事件：this.handleClick.bind(this，要传的参数)

     函数：handleclick(传过来的参数)