随笔分类 - React
摘要:ES6中的一个模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它。ES6的模块系统大致分为导出(export)和导入(import)两个模块。 1、名字导出(name export) 名字导出可以在模块中导出多个声明。 // lib.js export co
阅读全文
摘要:React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined。通常如果不是直接调用,应该为方法绑定this。绑定方式有以下几种: 1. 在构造函数中使用bind绑定this class Button extends React.Compon
阅读全文
摘要:如何创建函数组件 箭头函数形式 const Hello = (props) => { return <div>{props.message}</div> } // 可以简写成 const Hello = props => <div>{props.message}</div> function 形式
阅读全文
摘要:使用函数式创建 import {render} from 'react-dom'; function Hello(props){ return (<div>{props.name}</div>) } render(<Hello name='yf' />,document.getElementById
阅读全文
摘要:引入 对于函数组件 const App = props => { const [n, setN] = useState(0) //... } 在setN执行后: n不会被setN改变(重要!) 会触发UI更新,App()再次执行,再次useState(0)时,得到n的值不同 分析: setN将n的新
阅读全文
摘要:在 hooks 中提供了的 useReducer 功能,可以增强 ReducerDemo 函数提供类似 Redux 的功能,引入 useReducer 后,useReducer 接受一个 reducer 函数作为参数,reducer 接受两个参数一个是 state 另一个是 action 。然后返回
阅读全文
摘要:用来践行Flux/Redux的思想 一共分为四步: 创建初始值initialState const initial = { n:0 } 创建所有操作reducer(state,action) const reducer = (state ,action)=>{ if(action.type 'add
阅读全文
摘要:之前我们已经掌握了useState的使用,在 class 中,我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0: class Example extends React.Component { constructor(props)
阅读全文
摘要:一、 ES6的模块化的基本规则或特点 每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取。 一个模块就是一个单例,或者说就是一个对象; 每一个模块内声明的变量都是局部变量, 不会污染全局作用域 模块内部的变量或者函数可以通过export导出 一个模块可以
阅读全文