Day8
1.渲染App或者别的组件，一定要大写！！不能：function app(){}
2.结构：
{
2.1 四层一层一层往下传 * 两个案例
2.2 不需要一层一层往下传 * [（第一个案例+第二个案例react旧新两种写法）の重构 ]
3.1 解释第二个案例react旧的写法（使用babel+代码）：标签中传函数
}
//vanilla js写法
//index.js
function F1(props){
return <div>
1,{props.n1}
<F2 n2={props.n1}/>
</div>
}
function F2(props){
return <div>2,{props.n2}
<F3 n3={props.n2}/>
</div>
}
function F3(props){
return <div>3,{props.n3}
<F4 n4={props.n3}/>
</div>
}
function F4(props){
return <div>4,{props.n4}</div>
}
class App extends React.Component{
constructor(){
super();
this.state = {
n : 99
}
}
render(){
return (
<div>
<F1 n1={this.state.n}/>
</div>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
//react写法
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function Button(props){
return <button>{props.theme}</button>
}
class ThemedButton extends React.Component {
render() {
return <Button theme={this.props.theme} />;
}
}
function Toolbar(props) {
// Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。
// 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
// 因为必须将这个值层层传递所有组件。
return (
<div>
<ThemedButton theme={props.theme} />
</div>
);
}
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
问题：如果只有第四层函数需要n/theme值，也要前三层慢慢传下来，特别麻烦
设想：使用全局变量
问题：危险，有可能你拿到的值不是你想要的值
解决：使用ES6语法：局部的全局变量
//对于vanilla js
{
let context = {}
window.setContext = function(key, value){//把x暴露出来
context[key] = value
}
window.f1 = function F1(){
console.log(1)
</div>
}
function f2(){
console.log(2)
}
function f3(){
console.log(3)
}
function f4(){
console.log(4,context['n'])
//让需要n值的函数处于一个局部作用域里，n是这个局部作用域的全局变量，外界访问不了
}
//f1,f2,f3,f4四个函数其实就是闭包，也就是在局部作用域中的函数
//优点：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不 //会在f1调用后被自动清除。
//缺点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大
}
{
window.setContext('n', 100)
window.f1()//把F1()暴露出来
consloe.log("done")
}
注意：在ES5想造一个局部，需要使用立即执行函数
function (){
}()
//长这样婶的
//对于react
function F1() {
return (
<div>
1
<F2 />
</div>
);
}
function F2() {
return (
<div>
2
<F3 />
</div>
);
}
function F3(props) {
return (
<div>
3,
<ThemeContext.Consumer>
{(n)=><F4 n4={n} />}
</ThemeContext.Consumer>
</div>
);
}
function F4(props) {
return <div>4,{props.n4}</div>;
}
const ThemeContext = React.createContext();
class App extends React.Component {
render() {
return (
<div>
<ThemeContext.Provider value="99">
<F1 />
</ThemeContext.Provider>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
//react最新语法，这个更便于理解
function Button(props) {
return <button>{props.theme}</button>;
}
class ThemedButton extends React.Component {
// 指定 contextType 读取当前的 theme context。
// React 会往上找到最近的 theme Provider，然后使用它的值。
// 在这个例子中，当前的 theme 值为 “dark”。
static contextType = ThemeContext;
render() {
return <Button theme={this.context} />;
}
}
// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
const ThemeContext = React.createContext();
// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
class App extends React.Component {
render() {
// 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
// 无论多深，任何组件都能读取这个值。
// 在这个例子中，我们将 “dark” 作为当前的值传递下去。
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
3.解释 {(n)=><F4 n4={n}/>}//标签里传函数
首先了解JSX中{F1}来传函数（链接：https://babeljs.io/）
function F1(){
return <div>123456</div>
}
<div className="login" title="login_title">
F1
{F1}//在标签里传函数
<F1 /> //<F1 />这样写就会将<div>123456</div>渲染到这里
</div>
//<F1 />这样写就会将<div>123456</div>渲染到这里
"use strict";
function F1() {
return React.createElement("div", null, "123456");
}
React.createElement("div", {className: "login",title: "login_title"},
"F1",
F1,
React.createElement(F1, null));
自己写一个组件，来解释（这个先放一放，还没懂）
function Consumer(props){
let x = 100
props.children(x)
return (
<div>{props.children}</div>
)
}
function App (){
return (
<Consumer>
{(n)=>console.log('我得到的信息是', n)}
</Consumer>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
