React 初学笔记要点(父子组件 this stae )

首先要讲的就是  react 强调的思想是面向数据编程 ，React 的核心思想是组件化的思想

跟着视频从头又把react学习了一遍，巩固了一下基础下面就来说一下在学习过程中认为比较重要的点吧

1：什么是组件

组件被我简单的理解成 就是类 。自定义的一个组件必须要继承react的组件 即React.Component 才能变成react的一个组件，这是规定没有原因

class TodoList extends React.Component{}
export default TodoList;

组件定义完成之后要导出出去，便于其他组件导入引用，export 和 import 是配对使用

详解组件：

a：就是可复用的代码模块，其实也就是可复用的代码片段。

b：组件允许我们将应用的UI拆分成独立的、可复用的模块，其实也就是可复用的代码片段。React应用程序就是由组件来构建的，也就是说React应用的基石！

c：只要是页面上的一部分我们都可以把它理解成一个组件

d：组件就是网页上的有部分

e：在react中以大写字母开头的都是组件

f：ReactDOM就是为了便于我们把组件挂载(渲染)到dom元素上

2：state

是当前组件数据存放的位置, 也是当前组件的一个状态对象 

State是一个组件的UI数据模型，是组件渲染时的数据依据。

3：组件中的构造函数

在es6 语法中，创建一个组件的时候一定要写一个构造函数

constructor(props){
       super(props);
       this.state = {
           
       }
   } 

构造函数 组件被创建的一瞬间 构造函数会自动执行，上面是固定写法记住即可 props 是当前组件的一个属性，子组件可以通过props来访问父组见的属性  this.props.属性 即可

4：绑定函数 this 用法

handleItemClick(){
}

render(){
        const lists = this.state.lists;
        const inputVal = this.state.inputVal;
        return <div className={'todoList'}>
            <div>
                <input value={inputVal} className={'form-control'} placeholder={'请输入要添加的学习项目'} onChange={this.handleBlur.bind(this)}/>
                <button className={'btn btn-sm btn-primary listBtn'} onClick={this.handleClick.bind(this)}>add</button>
            </div>
            <ul>
                {
                  lists.map((item, idx) => {
                      return <li onClick={this.handleItemClick.bind(this, idx)} key={idx}>{item}</li>
                  })  
                }
            </ul>
        </div>
    }

render负责的就是当前组件要显示的内容，当我们需要触发某些事件的时候就需要用到js中的一些事件了，最常见的就是点击事件，首先要注意的一点就是 onClick 要大写

每个组件中的this 都是指向当前组件 ，react要调用方法就要使用 this.Fun()

若此方法中药调用组件中的对象则需要更改当前函数的this指向   

bind(this)更改this指向 将this指向当前组件 因为state是当前组件的对象 否则addTodoList方法中的this则指向当前点击的标签

5：父子组件

父组见通过属性的方式向子组件传递参数；

子组件通过props 接收父组件传递过来的参数，子组件读取父组件的属性  this.props.content

父组件：

return <div className={'todoList'}>
            <ul>
                {
                  lists.map((item, idx) => {
                      return <TodoListItem key={idx} content={item}></TodoListItem>
                  })  
                }
            </ul>
        </div>

子组件：

 render(){
        return <div>{this.props.content}</div>
    }

当子组件想要操作父组见的state的时候是不能直接操作的，但是父组件可以将方法传递给子组件，子组件通过调用父组件的方法来传递参数

父

 handleDelete(idx){
       const lists = [...this.state.lists];  // copy state 里面的 lists 
       lists.splice(idx, 1);
       this.setState({lists});
   } 
render(){
        const lists = this.state.lists;
        const inputVal = this.state.inputVal;
        <ul>
           {
            lists.map((item, idx) => {
              return <TodoListItem delete={this.handleDelete.bind(this)} key={idx} content={item} idx = {idx}/>
            })  
           }
         </ul>
        
    }

子 

handleClick(idx){
    this.props.delete(this.props.idx);
 }

  render(){
      return <div onClick={this.handleClick.bind(this)}>{this.props.content}</div>
  }

6：优化react

文章的最后小编提醒大家在写代码的时候有个可优化的地方 ，就是绑定函数的地方，可以在一开始构造函数中就指定绑定函数，这样就不用每次渲染的时候都要在绑定一遍了 。

可以有效的提高代码的执行性能，这牵扯到react 比较底层的问题了，以后小编了解透彻了再来跟大家一起学习吧

constructor(props){
       super(props);
       this.state = {
           lists: [],
           inputVal: ''
       }
       this.handleDelete = this.handleDelete.bisn(this);
   } 
render(){
      return
         <ul>{
             lists.map((item, idx) => {
                 return <TodoListItem delete={this.handleDelete} key={idx} content={item} idx = {idx}/>
              })  
          }
         </ul>
      
}

以上的写法就完美了  . ^ ^ .

 

本文地址：https://blog.csdn.net/zlzbt/article/details/107382271