react16学习笔记

todolist 简单实例

Todo.js

import React,{Component,Fragment} from 'react'
import TodoList from './TodoList'

class Todo extends Component{
  constructor(){
    super()
  }

  state = {
    inputVal:'',list:['1','2','3']
  };

  handleInputChange = (e)=>{
    let inputVal = e.target.value;
    this.setState(() => ({inputVal}))
  };

  handleButtonClick = ()=>{
    this.setState((prevState) => {
      return {
        list:[...prevState.list,prevState.inputVal],inputVal:''
      }
    })
  };

  handleItemClick =(index,event)=>{
    this.setState((prevState) => {
      const list = [...prevState.list];
      list.splice(index,1);
      return {list}
    })
  };

  render(){
    return (<Fragment>
      <div><input type="text" value={this.state.inputVal} onChange={this.handleInputChange}/>
        <button onClick={this.handleButtonClick}>提交</button>
      </div>
      <TodoList handleItemClick={this.handleItemClick} list={this.state.list}/>
    </Fragment>)
  }
}

export default Todo

 

TodoList.js

import React from 'react'
import PropTypes from 'prop-types'
import TodoItem from './TodoItem'

const TodoList = function(props){
  return (<ul>
    {props.list.map((item,index) => {
      return <TodoItem key={index} index={index} item={item} handleItemClick={props.handleItemClick.bind(this,index)}/>
    })}
  </ul>)
};

TodoList.propTypes = {
  list:PropTypes.array.isRequired,handleItemClick:PropTypes.func.isRequired
};

export default TodoList

TodoItem.js

import React from 'react'
import PropTypes from 'prop-types'
import TodoItem from './TodoItem'

const TodoList = function(props){
  return (<ul>
    {props.list.map((item,index) => {
      return <TodoItem key={index} index={index} item={item} handleItemClick={(event) => props.handleItemClick(index,event)}/>
    })}
  </ul>)
};

TodoList.propTypes = {
  list:PropTypes.array.isRequired,handleItemClick:PropTypes.func.isRequired
};

export default TodoList

https://reactjs.org/docs/handling-events.html   react 处理事件

• 驼峰命名
• 方法以事件的方式传递，而不是字符串
• jsx中this没有默认绑定，需要使用bind绑定，否则this会是undefined
• 可以在调用的地方使用箭头函数改变this指向，不过--这种写法会在组件每次render的时候重新创建，在以参数传递函数给子组件的情况下，子组件会发生不必要的重新渲染；
• 也可以在class中直接使用箭头函数的方式申明方法，现在还在试验阶段，在create-react-app可以直接使用
• 在子组件回调父组件函数需要传参的情况下，event始终是函数的第二个参数----如果使用bind，将会自动传递；如果是箭头函数，要显式写出；

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

https://reactjs.org/docs/typechecking-with-proptypes.html react props校验

https://reactjs.org/docs/lists-and-keys.html   react 循环渲染结构

• 使用map
• 使用key---在同一级是独一无二的,diff用；不能作为他用；

https://reactjs.org/docs/forms.html react 可控表单  updated with setState

https://reactjs.org/docs/uncontrolled-components.html react 不可控表单. 

https://reactjs.org/docs/composition-vs-inheritance.html react  组合代码

• props不仅可以传递数据和事件，也可以是jsx结构
• props.children直接获取到组件内部的jsx结构，这是唯一的

https://reactjs.org/docs/fragments.html   react fragments<框???>

• react render时只允许有一个根组件，这会迫使我们新增dom结构，或是
• 特定的dom组合标签，table>tr>td，在td外边包裹其他dom结构会导致dom失效，这些情况下使用fragments代表根组件并会在渲染成dom时自动忽略

 https://reactjs.org/docs/refs-and-the-dom.html react refs

• could be an instance of a React component， not a function components
• could be a DOM element