03 2021 档案
摘要：Provider 内的任何一个组件，如果需要使用 state 中的数据，就必须是被 connect 过的组件——使用 connect 方法对你编写的组件进行包装后的产物。 class MyComp extends Component { // content... } const Comp = co
阅读全文
摘要：react-router: 它通过管理 URL，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到。 用法：子路由也可以不写在Router组件里面，单独传入Router组件的routes属性。 组件有一个参数history，它的值hashHistory表示，路由的切换由URL的hash变化决定
阅读全文
摘要：Redux 唯一数据仓库 只能读取 数据改变只能通过纯函数进行. ////////////////////////////////////////////////////////////////////////////////// 点击button后，在回调中dispatch一个action,red
阅读全文
摘要：Redux简介： 1、Redux 是一个状态容器 Redux 它不会为你提供任何的东西，它不会告诉你如何做路由，它只专注于应用程序状态，是一个 JavasSript 的状态容器，所有的状态的变化都是当前状态和 Action 共同的作用结果。 对于view来说，不用关心数据是怎样变化，只需要在 vie
阅读全文
摘要：provider组件概念图: provider组件的作用: provider包裹在根组件外层，使所有的子组件都可以拿到state. 它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过context获取store。 provider组件的原理: expor
阅读全文
摘要：React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。 class MyComponent exten
阅读全文
摘要：HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。 在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，
阅读全文
摘要：React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成
阅读全文
摘要：组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，
阅读全文
摘要：在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法: 设置状态：setState 替换状态：replaceState 设置属性：setProps 替换属性：replaceProps 强制更新：forceUpdate 获取DOM节点：findDOMNode 判断组件挂载状态：isM
阅读全文
摘要：使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表: map()方法可以用来创建列表。 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((numbers) => <li>{numbers}</li> ); R
阅读全文
摘要：在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。 先
阅读全文
摘要：React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法，而不是小写 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法) HTML 通常写法是： <button onclick="activ
阅读全文
摘要：React Props state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 使用 Props： function HelloMess
阅读全文
摘要：React 把组件看成是一个状态机（State Machines) ,通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致. React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）(相当于用数据去驱动，而不用操作DOM) 以下实
阅读全文
摘要：使用组件使得我们的应用更容易来管理 React 组件: 1:可以使用函数定义一个组件 function HelloMessage(props) { return <h1>Hello World!</h1>; } const element = <HelloMessage />; ReactDOM.r
阅读全文
摘要：const element = <h1>Hello, world!</h1>; 这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX， 一种 JavaScript 的语法扩展。元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。 注意: 由
阅读全文
摘要：React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上： const element = <h1>Hello, world!</h1>; ReactDOM.render( element, document.getElementByI
阅读全文
